React hook flow example issue

[jgarciallamas]

Hi Kent,

Congrats for such an amazing React course, epic I would say : -)

I just wanted to ask you abou the react hook flow example, and more specifically when I change the state on the App component, showChild state. Question is that the App re-renders and the Child component is mounted, but according to the output I'm getting I see that the App cleanup functions are running before the Child useEffect hooks.

This is what I'm getting:

And this is output show in the video:

Thank you very much in advance for your thoughts on this.

Jose

[kentcdodds]

Nice catch! I'm pretty sure that this change is due to a recent change in React v17: https://github.com/facebook/react/pull/17925

I'll need to re-record this video. Thanks for letting me know :)

NOTE: The change doesn't make much of a practical difference in most cases, so don't worry too much about it :)

[jgarciallamas]

Thanks for replaying Kent.

This is a proof that React evolves constantly :-)

[nohaibogdan1]

Hello guys :)

I am wondering why it does not run the cleanup for the useEffect that is runned only once in the App (App: useEffect(() => {}, [])).

[kentcdodds]

Because the App component is never removed from the page.

[manyasood3005]

I did not understand the difference between these 2 steps - 1)React Updates the DOM 2)Browser paints screen javascript is single threaded language so moment react updates the dom, i.e uses DOM API's to create nodes, browser will be busy in painting the screen.so useLayoutEffect needs to wait will repaint is done. cannot wrap my head, how layOut effect runs in between above mentioned steps.

When does react call document.createElement in step 1 or in step2? and when does react appends these created elements to actualt DOM? This is my understanding what is happenning here (Corect me if I am wrong) -

React Updates the DOM - React Figures what it needs to draw on screem by calling child component's render function. Note - here react is not calling DOM API like document.createElement to actually update DOM

then it runs cleanup of layoutEffects and layoutEffect.

Browser paints screen - In order to paint elements on screen, here react will call DOM API's like createElement to create the actual element on screen and appends it to DOM. so actual element creation(document.create) happens in this step only.

[andreyvolokitin]

This is my speculation, but maybe it's related to the way browser renders a frame. When executing JS, if DOM isn't read in a way which causes a browser to recalculate layout (aka reflow) synchronously, then all sequential DOM writes are automatically queued by the browser and performed/rendered in combination after JS is done executing, but we can force the browser to apply DOM writes synchronously, during JS execution, while delaying actual browser painting (which happens only after JS is done executing):

• https://www.webperf.tips/tip/layout-thrashing/
• https://web.dev/avoid-large-complex-layouts-and-layout-thrashing/#avoid-forced-synchronous-layouts

useLayoutEffect docs suggests that this hook is doing same thing — it triggers a "forced synchronous layout/reflow" during JS execution, so DOM writes are applied immediately, while you get a chance to execute your custom JS code (useLayoutEffect callback). All this blocks the browser to paint the frame because it should happen after JS is done executing

So "React Updates the DOM" and "Browser paints screen" steps are essentially "JS Task" and "Paint" steps of a usual browser frame-rendering pipeline shown in this diagram (while useLayoutEffect causing a forced reflow and potentially adding more code to execute inside "JS task"):

[kentcdodds]

This is getting an update soon!