Multiple times render in react functional component with hooks

reactjs react-hooks use-effect
Nahid Islam picture Nahid Islam · Nov 4, 2019 · Viewed 9.1k times · Source

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?

Answer

Davin Tryon picture Davin Tryon · Nov 4, 2019

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.

Related questions

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 …

Read More
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 …

Read More
React Hook "useState" is called in function "setResults" which is neither a React function component or a custom React Hook function

I am trying to make an API call in a functional component which is a react-hook and based on the result, re-render the component's content. Here is the code: Component which is calling the API- function IntegrationDownshift() { render( <Paper …

Read More