8

Actually I am not getting the right point of this problem. So seeking help. I have this state full functional component. The thing I have noticed here is that when I fetch data using useEffect hook then I get the response properly.

The problem is, when I execute console.log("ok") in the return statement it provides output multiple times in the console. The images are added bellow:

Here is my state and useEffect hook

enter image description here

And here is my return function

enter image description here

Here is the console output I get on each time I browse the page. enter image description here

Why the console.log("ok") is executing multiple times?

Improve this question
3
  • "By default, it runs both after the first render and after every update." reactjs.org/docs/hooks-effect.html Commented Nov 4, 2019 at 16:15
  • @Faz But the console.log() is not inside of the effect and even if it would it would only log once after mount because of the empty dependency list. Commented Nov 4, 2019 at 16:20
  • 8
    Please avoid posting code as images. This makes it harder for people the copy parts of your code and to create sandboxes with it to test. Also the images may become unavailable in the future. Use code blocks or the code snippet editor instead. Commented Nov 4, 2019 at 16:38

2 Answers 2

Reset to default
15

It isn't executing multiple times, it is executing 5 times:

  1. useEffect (first render)
  2. setMovies
  3. setHeroImage
  4. setCusrrentPage
  5. setTotalPages

useEffect has deps of [] so this only happens on the first render only. Then you are changing state 4 times, so a re-render happens. This does not mean that the DOM is changed 5 times.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Maybe OP expected multiple state updates to be batched which usually would be the case. But as pointed out in an answer of the question linked by @El Aoutar Hamza this does not apply if the state updates happen in an async handler.
How can this possibly be more performant than a class component's setState which merges old and new state objects and updates things in a batched manner if my hooks version of the component is rendering 5 times instead of one?
0

React is incredibly simplistic and basically re-renders everything all the time. Re-render is triggered if a component’s state has changed. You update state 4 times, thats why.

Improve this answer

4 Comments

This is not correct, React may batch the state updates
Yes it can but not in this specific situation when you "manually" call the state updates. :)
It actually depends on whether you are setting the state inside or outside a React event handler: github.com/facebook/react/issues/10231#issuecomment-316644950.
That is not entirely correct. By default it only re-renders component whose props or state did change and their children. Also multiple state updates may be batched resulting in only a single re-render.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.