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
799
votes
23 answers

How to fix missing dependency warning when using useEffect React Hook

With React 16.8.6 (it was good on previous version 16.8.3), I get this error when I attempt to prevent an infinite loop on a fetch request: ./src/components/BusinessesList.js Line 51: React Hook useEffect has a missing dependency:…
russ
  • 8,023
  • 3
  • 8
  • 8
523
votes
16 answers

How to call loading function with React useEffect only once

The useEffect React hook will run the passed-in function on every change. This can be optimized to let it call only when the desired properties change. What if I want to call an initialization function from componentDidMount and not call it again on…
Dávid Molnár
  • 10,673
  • 7
  • 30
  • 55
280
votes
3 answers

In general is it better to use one or many useEffect hooks in a single component?

I have some side effects to apply in my react component and want to know how to organize them: as a single useEffect or several useEffects Which is better in terms of performance and architecture?
Vadim
  • 3,474
  • 3
  • 14
  • 21
198
votes
4 answers

In useEffect, what's the difference between providing no dependency array and an empty one?

I gather that the useEffect Hook is run after every render, if provided with an empty dependency array: useEffect(() => { performSideEffect(); }, []); But what's the difference between that, and the following? useEffect(() => { …
Paul Razvan Berg
  • 16,949
  • 9
  • 76
  • 114
75
votes
8 answers

useEffect not called in React Native when back to screen

How are you. This is scenario of this issue. Let's say there are 2 screens to make it simple. enter A screen. useEffect of A screen called. navigate to B screen from A screen navigate back to A screen from B. at this time, useEffect is not…
Nomura Nori
  • 4,689
  • 8
  • 47
  • 85
73
votes
6 answers

Why is the cleanup function from `useEffect` called on every render?

I've been learning React and I read that the function returned from useEffect is meant to do cleanup and React performs the cleanup when the component unmounts. So I experimented with it a bit but found in the following example that the function was…
Joji
  • 4,703
  • 7
  • 41
  • 86
63
votes
2 answers

Passing a function in the useEffect dependency array causes infinite loop

Why is an infinite loop created when I pass a function expression into the useEffect dependency array? The function expression does not alter the component state, it only references it. // component has one prop called => sections const markup =…
mmason33
  • 878
  • 1
  • 6
  • 10
53
votes
2 answers

What does it mean to 'move this variable directly inside useEffect' in this error message?

I am attempting to pass an object through props to a child component. The value is set in the useEffect hook and lost when passed to my child component. I have tried setting the value of the object outside the useEffect hook in a separate function…
Sam Schantz
  • 533
  • 1
  • 4
  • 7
51
votes
5 answers

Getting error after I put Async function in useEffect

In the useEffect function, if I just mention the getResults function variable, the app doesn't crash. But when I call it as I am doing in code below, I get these errors: react-dom.development.js:21857 Uncaught TypeError: destroy is not…
Irakli Tchigladze
  • 693
  • 2
  • 7
  • 13
50
votes
5 answers

UseEffect being called multiple times

I thought useEffect is called once only after render, but it's being executed multiple times and not in the order I expected. I expected it to msg 'data loading' while the fetch is in progress and then once fetch is done, render the title field and…
nktoronto
  • 711
  • 1
  • 7
  • 10
42
votes
2 answers

Using document.querySelector in React? Should I use refs instead? How?

I am building a carousel right now, in React. To scroll to the individual slides I am using document.querySelector like so : useEffect(() => { document.querySelector(`#slide-${activeSlide}`).scrollIntoView({ behavior: 'smooth', …
R. Kohlisch
  • 2,823
  • 6
  • 29
  • 59
34
votes
2 answers

Why shouldn't I use catch() to handle errors in React useEffect API calls?

On this page of the React docs: https://reactjs.org/docs/faq-ajax.html A code comment says... Note: it's important to handle errors here instead of a catch() block so that we don't swallow exceptions from actual bugs in components. ...about…
C. Ball
  • 643
  • 1
  • 8
  • 18
33
votes
4 answers

How to stop memory leak in useEffect hook react

I am using Effect hook to fetch the datas from server and these data are passed to the react table there i have used the same api call to load the next set of datas from server. When the application gets loaded i am getting an warning like…
Nidhin Kumar
  • 3,278
  • 9
  • 40
  • 72
30
votes
3 answers

What is the correct order of execution of useEffect in React parent and child components?

For example, if I have components A and B, and component B is the child of component A: Inside A we have: useEffect(() => { console.log('Parent A useEffect') }) Inside B we have: useEffect(() => { console.log('Child B…
0xh8h
  • 3,271
  • 4
  • 34
  • 55
29
votes
3 answers

How to rerender component in useEffect Hook

Ok so: useEffect(() => { }, [props.lang]); What should I do inside useEffect to rerender component every time with props.lang change?
Piotr Żak
  • 2,046
  • 5
  • 18
  • 30
1
2 3
…
99 100