Confusion on Executing Timing of useEffect.

[DevinJohw]

Summary

It doesn't require there to be state updates inside Effect when repaint happens before Effect executes.

Page

https://react.dev/reference/react/useEffect#caveats

Details

The orginal sentence is:

Even if your Effect was caused by an interaction (like a click), React may allow the browser to repaint the screen before processing the state updates inside your Effect.

I think what the docs want to express is that browser repainting happens before the code inside Effect executes. It doesn't has to there are state updates inside Effect. The orginal sentence give me an misunderstanding that it happens only when there are state updates inside Effect.

This would be much better:

"Even if your Effect was caused by an interaction (like a click), React may allow the browser to repaint the screen before executing the code in your Effect that responds to state updates."

[rickhanlonii]

Sorry for the confusing wording, but the current text is correct. Your version:

Even if your Effect was caused by an interaction (like a click), React may allow the browser to repaint the screen before executing the code in your Effect that responds to state updates.

Is covered by the previous bullet point:

If your Effect is caused by an interaction (like a click), React may run your Effect before the browser paints the updated screen.

So for a click, the effect runs before paint (so you can attach event handlers before we yield to the browser which may fire an event to the thing you're adding a handler to), but any state updates scheduled in that effect are deferred to render after paint (so we don't force a synchronous render of those updates before painting, the way layout effects do).

Hope this helps!