Why does a function outside useEffect get called while a function inside useEffect without dependency array doesn't?

Question

Until today I thought that code inside an useEffect without dependency array and code outside useEffect both trigger on every rerender, but then I found this weird case and I don't understand why is this happening.

In THIS example, the first time you click the button it triggers a setState to a different value so it rerenders and both console.log are called, but the second time you click the button a setState is called with the same value, still the outside console.log gets called, but the console.log inside useEffect doesn't... why? Is this not a full rerender? How can the component get reevaluated without triggering useEffect again?

The next time you click the button nothing happens because calling setState with the same value doesnt trigger a rerender, but the first time does that weird half-rerender thing that I dont understand.

Thanks in advance.

score 1 · Accepted Answer · answered Nov 03 '21 at 11:45

1

I will answer my question:

This behavior is actually explained in the official docs and nothing to worry about since it's not a "real" render.

This is the relevant part:

If you update a State Hook to the same value as the current state, React will bail out without rendering the children or firing effects. [...]

So basically React evaluates the function, so the outside console.log will be called but then it just bails out without rerendering the children or firing useEffect

answered Nov 03 '21 at 11:45

BraisC

199
2
10

what is the point of evaluating the function, if react knows the state has not changed? – Antoine Weber Mar 20 '23 at 14:21
@AntoineWeber maybe it has to do it to know if the state or anything else changed :/ – BraisC Apr 05 '23 at 13:15

Why does a function outside useEffect get called while a function inside useEffect without dependency array doesn't?

1 Answers1

Linked