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? 🤔

[19Qingfeng]

Hi,This is a fantastic article. However, I have been reviewing the documentation regarding this sentence:

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

Combining the Demo 3, the useEffect Callback caused by events are always called before screen rendering, which is different from the react.dev.

May I ask under what circumstances would it be similar to a document: the browser may repaint the screen before processing the state updates inside your Effect

[19Qingfeng]

I think the article lacks an example of an event similar to discrete events, and the missing examples are like those explained in the document. For example, like onmouseEnter

[tungtuoitan]

thank you so much. Your post save my life!