The React Lifecycle: Simply Explained!

[@edward-vonschondorf-dev]

Definitely interested in more videos involving looking behind the scenes of how all these meta frameworks/libraries actually work. Does a great job of de-mystifying things.

[@TYTAX_HOME_GYMS]

Greetings from Poland. One of the best explanations of how React works that I have ever seen. I have been working with React and Next.js for two years and only now have I fully understood a few concepts of how React works. Thanks for this video.

[@AjithkumarSekar]

Wow.. what a timing. I was just looking for this 2 days ago and thought it would be nice if you have any videos on it

[@ayushdedhia25]

Thank you for your videos. This one is very important video specially when you don't why your react code work unexpected because we don't know what actually happens BTS. This helps us to write better scalable code 🙏🏻

[@germain1984]

love these types of videos, would be great if you used this format to go thru other concepts

[@andyfoote8117]

Great explanation. Useful to see the differences between the client/server implementation being explained.

[@farzadmf]

Very nice explanation; thank you!

[@serdotsenko]

I loved how you explained the core concepts! To make this even more useful, I suggest adding a practical example, like a coding demo, to show how these ideas are applied in the real world.

[@a-short-dev]

This is the best, I can now answer interview questions better

[@mohamedsalimbensalem6118]

Finally, the video that ive been waiting for, Thanks darius for the video ❤

[@BarakAlmog]

Great video. Appreciate your efforts 🙏

[@AlphaTechy]

Very nice explanation ❤ , Thanks

[@kartikvishwakarma7567]

Great explanation specially server components part. So what I get is every react lifecycle whether its mounting, updation, or unmounting it creates a new virtual dom and replaces the real dom with the nodes which are changed only, right?

[@ptolemyhenson6838]

Does React run effect cleanup only after unmounting, or also before each rerun of the actual effect?

[@cosdensolutions]

Both

[@tonyg_nerd]

@cosdensolutions Big thanks to you for this vid and all others. Please forgive a bit of fine-tuning: With a dependency array with elements, the cleanup function is executed before the effect re-runs due to a change in the dependencies. - Cleanup is not run if dependencies haven't changed. If the dependencies array is empty ([]), the effect runs only once when the component mounts, and the cleanup runs only once when the component unmounts. If no dependency array is provided, yes, the effect runs on every render, and the cleanup also runs before every re-run of the effect. If an async operation is performed in cleanup, It is not scheduled with priority before the effect. It's run synchronously, and any async handling will probably follow the effect processing. To summarize: - If the effect is going to run, cleanup will run before it. - If the effect is not going to run, cleanup will not run on re-render. - Cleanup always runs on unmount. - Avoid async in cleanup, or manage it carefully. I'm not being a smart-a** , these rules only became fully clear to me after watching this vid. Thanks!

[@P.Shivakrishna]

what about useRef in updating stage how it is act in every state ?

[@cosdensolutions]

it will update the value, but won't trigger a re-render. So the value will be updated in memory, but if you're using it in JSX, it won't be shown until something else triggers a re-render

[@yogeshk4348]

Love from INDIA ....

[@sjoerdvermeijden]

So on every state change the VDOM is re-rendered?

[@fitsaleem]

great cosden

[@shahwaizkarim-h9z]

sir let's take this example code : useEffect(() => { const connection = createConnection(serverUrl, roomId); connection.connect(); return () => connection.disconnect(); }); As you said, when the component re-renders it runs the cleanup function at the end, and clean up function clears all the memory. If this happens then the connection should break due to a state change in component. Now this is pretty common we have to change states in every app. Would the connection break between two users if the cleanup function runs on state change in the above code?

[@cosdensolutions]

it would, but you would pass `serverUrl` and `roomId` as dependencies to useEffect, so that useEffect will only run when the server url changes or the room id, which is what you want. Otherwise, the component can re-render all it wants, the useEffect won't re-run unless its deps change

[@shahwaizkarim-h9z]

@@cosdensolutions Thank you bro for the reply!

[@ali.thecoder]

Does this works in react native too ?

[@cosdensolutions]

yeah, except the server part is still pending

[@jamesbotwina8744]

Why isn't there an option to send you money through KZbin? This is a great video. I'd give you $2.

[@cosdensolutions]

appreciate the kind words!

[@SieanLeon]

when the cleanup function is executed inside the useEffect() hook callback function? It’s kind of confusing the way useEffect() callback works. If this callback function is scheduled to be ran earlier why the its return only executed upon component unmount stage

[@cosdensolutions]

check my useEffect tutorial video! it explains it super nicely

[@SieanLeon]

@ ok. 👌 Thanks! i’m just trying to refresh myself on latest React updates and implement later in my application UI. Some of these framework features had been forgotten already.

[@developertools95]

u r my bosss

[@johnforeverrules]

first. nice video my man

[@PukarChhatkuli]

good

[@rahulyo.gaming]

Sorry but actually it is a black board 😂

[@quickindiarecipe]

isn't useState also asynchronous?