Questions tagged [use-effect]

Questions related to the use of 'useEffect', which is a reactjs hook.

The hook useEffect, available in React since v16.8, is used to trigger functions after component renders, either for the first time, every time, or when one of the listed dependencies changes.

This can be seen as a loose replacement for componentDidMount and componentDidUpdate, however be aware that useEffect fires after rendering, not after mounting.

Optionally, useEffect can return a function that runs on unmounting the component.

3547 questions
1
vote
0 answers

useEffect with fetch -> setState ->props -> setState = problems for my voting system. How Should I Be Doing it?

What I am trying to do: I need to use hooks in my component but I setState already from the very start of the app which is giving me a delay. What the overall Data Structure Looks Like: useState checks for changes in a let that changes the request…
VI11age_ID10T
  • 161
  • 11
1
vote
3 answers

React Countdown Reset

I'm trying to build a countdown timer but I'm facing an issue which I don't understand. When I press start the timer works fine and the same goes when I pause it. The problem is when i press the reset button, which is supposed to stop the countdown…
Mugg84
  • 585
  • 1
  • 7
  • 15
1
vote
2 answers

Needs Help To Troubleshoot Fetching Single Document From Firebase Database As Detailed Page

I'm try to get single document as detail information from Firebase database under collection "books", however my array method map does not recognize as function due to the render produce "undefined". Somehow render again and produce the object…
1
vote
2 answers

How to Re-render Component Only Once after the data is changed?

I am new to React JS. I am making CRUD Operation in React. Everything is fine but when I delete the item from the list I have to refresh the browser tho update the List. How can I solve this? import React, { useState, useEffect } from 'react' import…
Biraz Dahal
  • 361
  • 1
  • 5
  • 20
1
vote
1 answer

React useEffect avoid update callback in every update

Is there a way to avoid update a callback in useEffect?. For example I am subscribed an event with geofire, this listens for changes and receive locations. I need to update my state without subscribing every time on every update. Current…
Ronny Medina
  • 165
  • 1
  • 9
1
vote
2 answers

Trying to render 4 videos to my application from an api call to youtube

import React, { useState, useEffect } from 'react'; importing my hooks function useFetch(url, defaultResponse) { const [data, setData] = useState(defaultResponse); async function getDataFromAPI(url) { try { const res =…
1
vote
1 answer

Firebase Firestore running twice inside react useEffect() hook. Why?

I have connected to my Firebase Firestore database in useEffect() hook in react-native. My useEffect looks like this - useEffect(() => { console.log("HEY") firestore().collection('users') .doc('user1').get() …
1
vote
2 answers

Reactjs useffect not updating usestate

I have a use effect which is supposed to keep a button disabled until a row on a table has been clicked, then the button will be clickable. For some reason, it is not updating the state. I put a console log in the 'if' part of my use effect to check…
monkeys73
  • 171
  • 1
  • 3
  • 13
1
vote
2 answers

How do I stop useEffect from making my component re-render infinitely?

Edited again to explain that === compares the memory location of objects (Why are two identical objects not equal to each other?) which is why the useEffect() kept running again and again and again... I think I have it sorted now but will leave the…
DRobinson
  • 145
  • 1
  • 12
1
vote
3 answers

React useEffect not rerendering

I am trying to change a value in an array and rerender the component with useEffect but useEffect is not triggering. Value is being changed but calling useState has no effect. const handleOptionClick = (e) => { var el =…
Hasan Zubairi
  • 1,037
  • 4
  • 23
  • 57
1
vote
0 answers

I am trying to Navigate to a different screen automatically after my Fetch call using useEffect() but getting an object is undefined error

Right now I am able to make the call every 3 seconds and start getting the data and I have a button which after pressing, i can move to the final screen and render the data but when i try to do this, automatically I get undefined error. I have tried…
1
vote
1 answer

Child component does not rerender when parent changes prop

The parent component: const Parent = ... var render = {}; render.value = false; ... return (
user12546101
1
vote
1 answer

Axios, UseEffect, Redux

Why is this useEffect goes in inifinite loop useEffect(() => { async function fetchApi() { let res = await Axios.get(props.url + '/articles') props.loadArticles(res.data) } fetchApi() }) knowing that the component is…
1
vote
1 answer

React Hooks - setting object not re-rendering the component's data

I am using React useState to declare my object: const [results, setResults] = useState(); console.log(results); In same file I am returning React component and I am passing it some props:
Borislav Stefanov
  • 533
  • 3
  • 15
  • 38
1
vote
1 answer

What's wrong with my useEffect code, and why is my state variable empty?

I have a problem and I'm not sure what's causing the problem. So I have done a fetch with an external api and I want to print out some of the information from the api. I have logged the data and the state variable to see if they return the data. My…
Sus
  • 63
  • 6