2023-08-09-effects-run-paint/

[utterances-bot]

When do useEffect() callbacks get run? Before paint or after paint?

Most of time useEffect() callbacks are run after paint but some time before paint.

https://jser.dev/2023-08-09-effects-run-paint/

[sk16]

Great analysis. This explains why I have this bug : https://stackoverflow.com/questions/76422864/troubleshooting-progress-bar-transition-issue-in-react-code

[JSerZANP]

@sk16 thx! glad I could help

[slyxh2]

Hi, the article is great! But for demo 1, I tried it in my local environment in React v18.2.0, the console result is 1 3 4 2. I do not know why I got the different result compared with codesandbox. And in the codesandbox, I open the native chrome console, the result is also 1 3 4 2. It's so wired...

[JSerZANP]

@slyxh2

interesting, I cannot reproduce with your result. Could you help find out why?
the reason why I gest 1 2 3 4 is explained in section 3 I'm guessing it is because of different browser or machine spec? 🤔