Multiple times render in react functional component with hooks

Question

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

And here is my return function

Here is the console output I get on each time I browse the page.

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

Solution

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.