Update useEffect.md - The explanation on the timing of useEffect() callback doesn't seem to be accurate.

[JSerZANP]

on React.dev useEffect(), it says

If your Effect wasn’t caused by an interaction (like a click), React will let the browser paint the updated screen first before running your Effect.

But after digging into the React source code I found this is not 100% accurate, since even for Effects not caused by interactions, they still might be flushed earlier before paint. For example Effects hoisted by Layout Effects, or if Scheduler has enough time internally. (I've put the findings on my blog).

So I'd suggest we make the statement more accurate to

Most of the time React will let the browser paint the updated screen first before running your Effect. React might run your Effect before browser paint if it is more important(for example, if it is triggered by interactions or under Layout Effects) or simply React has the available time internally to do so.

[github-actions]

Size changes

📦 Next.js Bundle Analysis for react-dev

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌

[JSerZANP]

@rickhanlonii any chance you can take a look?

[Ranamalsingh12]

Hey @JSerZANP your explanation is quite clear and informative. However, for even better clarity, it would be helpful to provide more specific examples of scenarios where React might prioritize running the Effect before the browser update. Additionally, consider breaking down the explanation into a more structured format, starting with the general behavior and then discussing exceptions. Overall, great work, and these improvements will make it even more accessible to readers. Hope you will look into it.
Thank you.

[sophiebits]

Thanks for your investigation. You are correct that if another state update is scheduled then React will run effects sooner to make sure that all effects are complete before any new updates are processed.

I am open to documenting this on this page but adding the detail as you have done here obscures the main guidance which is that useLayoutEffect is the recommended approach for updates that affect the visual appearance. As a result I will make a more minor edit to the original wording to improve the accuracy of it without making it harder to understand for people who just want to know how to use the hook.

[Ranamalsingh12]

Looks good.