Stack Overflow
Stack Overflow

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
4
votes
2 answers

why history is needed in dependency array of useEffect

In the following example, I used history to redirect some link. const history = useHistory() useEffect(() => { history.push(`/my/link`) }, []) Then react complains a missing dependency history. I do not understand why history can be a dependency…
derek
  • 9,358
  • 11
  • 53
  • 94
4
votes
2 answers

Expo React Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application

I'm new to react native and was following a tutorial on medium about how to connect with firebase auth. Everything seems to work fine, but I keep getting this warning below: Warning: Can't perform a React state update on an unmounted component. This…
Shubham Goyal
  • 41
  • 1
4
votes
1 answer

How to update State Hook with onClick listener on React Component Instance

I'm attempting to add an onClick to a component instance which changes the state of a useState hook, and prints it out to the console. However, nothing fires when the component instance is clicked. I have tried wrapping it in a JSX div element and…
OJM
  • 442
  • 5
  • 16
4
votes
1 answer

useEffect Hook - how to detect the change of an object's property in a state array

How can useEffect detect the change in an array's object's property without knowing the state array size because items may be added dynamically in this particular case the "price" property in one of the objects The array is a state Just for…
ExtraSun
  • 528
  • 2
  • 11
  • 31
4
votes
2 answers

Correct way to cleanup useEffect with Promise

I have useEffect callback where I'm fetching some data from several API. To do that I'm using Promise and my code looks like that: useEffect(() => { const fetchAllData = async () => { const resourceOne = new Promise((resolve) => { …
Romanas
  • 547
  • 7
  • 25
4
votes
3 answers

How to return values from UseEffect Hook

I am getting the latitude and longitude from a Use Effect hook (which I am relatively new to). I want to return the values outside the use effect hook and store them in variables or even state if needed. I can console log the values but do i just…
lache
  • 608
  • 2
  • 12
  • 29
4
votes
0 answers

csv file is empty after creating and downloading it using react-csv

I built a small react app that takes data and changes it in some way, then downloads it to a csv file. When I download the file the csv is empty. Here is my code: const [data, setData] = useState([]); const downloadBtn = useRef(); …
Ohad Yeahhh
  • 191
  • 1
  • 10
4
votes
0 answers

Load markers dynamically with react and mapbox gl or maplibre gl

I am learning React. I want to display a map on which markers are dynamically shown and hidden. This works. I use Maplibre GL, which is a fork of Mapbox GL and the handling is the same. Unfortunately, however, when the markers are changed, the map…
astridx
  • 6,581
  • 4
  • 17
  • 35
4
votes
1 answer

Why does a function outside useEffect get called while a function inside useEffect without dependency array doesn't?

Until today I thought that code inside an useEffect without dependency array and code outside useEffect both trigger on every rerender, but then I found this weird case and I don't understand why is this happening. In THIS example, the first time…
BraisC
  • 199
  • 2
  • 10
4
votes
1 answer

Promise.all() inside useEffect in react returns an array of undefined items

It works after the fetch, then after Promise.all() returns undefined. Same happens with Promise.allSettled(). function DrinksPage(props){ const [drinkCard, setDrinkCard] = useState([]); var id = props.id; useEffect( () =>{ …
E.K.Garcia
  • 49
  • 2
  • 7
4
votes
1 answer

React useEffect calls API too many time, How can I limit the API call to only once when my component renders?

I am calling a get API in useEffect hook, to get the data before component mounts, but it's calling the API to many time and I am getting an error "To many API calls". const [total, setTotal] = useState(0); const [message, setMessage] =…
MDMH
  • 83
  • 1
  • 8
4
votes
2 answers

Mobx - UseEffect hook not executing when item in dependency list is changed

I'm new to React and Mobx. I want the useEffect hook in the code below to execute whenever the dates are changed. The date variables are inside a store. Whenever I change the date, I expect the useEffect in my component to execute, but it only…
Waleed Alvi
  • 71
  • 2
  • 6
4
votes
0 answers

When is there a use case where useEffect(fn) should always run for fn?

I realized that useEffect(() => { }); without the second argument of the array will cause the function to run every single time. However, since we are concerned with some data or ID to display (the React docs of setting the document's title) or…
Stefanie Gauss
  • 425
  • 3
  • 9
4
votes
2 answers

React keypress event taking only initial state values and not updated values

I am creating a React application in which I have one state called input which is taking input from user. I want that when I press enter key, alert should display the input which is getting set in state. However, on clicking enter key, only default…
satyam
  • 71
  • 1
  • 4
4
votes
4 answers

How to call a function after setting state is complete in useEffect?

I would like to run customFunction only when customEffect has finished setting isReady state. And customFunction should only run once no matter if the isReady was set to false or true as long as it was ran after it was set. import customFunction…
OFFLlNE
  • 747
  • 1
  • 8
  • 17
1 2 3
…
99 100