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?

Nahid Islam
  • 193
  • 1
  • 5
  • 15
  • "By default, it runs both after the first render and after every update." https://reactjs.org/docs/hooks-effect.html – Faz Nov 04 '19 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. – trixn Nov 04 '19 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. – trixn Nov 04 '19 at 16:38

2 Answers2

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.

Davin Tryon
  • 66,517
  • 15
  • 143
  • 132
  • 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. – trixn Nov 04 '19 at 16:31
  • 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? – SacWebDeveloper Jun 04 '20 at 07:21
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.

mstoJS
  • 119
  • 1
  • 6
  • 4
    This is not correct, React may batch the state updates – Hamza El Aoutar Nov 04 '19 at 16:18
  • Yes it can but not in this specific situation when you "manually" call the state updates. :) – mstoJS Nov 04 '19 at 16:23
  • 1
    It actually depends on whether you are setting the state inside or outside a React event handler: https://github.com/facebook/react/issues/10231#issuecomment-316644950. – Hamza El Aoutar Nov 04 '19 at 16:25
  • 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. – trixn Nov 04 '19 at 16:25