The React Lifecycle: Simply Explained!

In this video, I'm going to explain to you the  React lifecycle and how it works and the order that things go through in super simple terms,  with the goal that you hopefully will understand this. Now, whether you're somebody who's just  starting out with React, this is going to be a great video because it's going to actually  teach you how everything works. But also, if you have already some experience with React,  this is going to be a good opportunity to learn a thing or two that you may not have known  before, which is ultimately going to make you a better developer.

Now, we're going to be  mostly focusing on the client side of things, because really that's where the lifecycle kind  of lives. But also, towards the end of the video, we're also going to take a look at the server  side of things in React, with server components and whatnot, to also see how it works there  and how it compares with the client side, because that's also important. So, get ready,  get excited, because you're going to learn a lot in this video.

And by the way, if you want to  see an actual implementation of all of this in a real project and how it all works together,  definitely check out Project React. It's my course. I highly recommend it.

It'll be the first  link in the description. Let's get into the video. All right, so let's begin.

So, here I have  this whiteboard. I'm going to be essentially drawing and wireframing all of the different  parts that are really important to know when it comes to the React lifecycle. The first  thing to really understand is that in React, whenever we're working with components, right,  because React applications are essentially just a bunch of components that you put together to  make up an application, you have to understand that components in React are ultimately JavaScript  functions that get executed.

So, I'm going to come here and do a function. And then here, we're going  to put component, call it, and then obviously not put any code, because this is pseudocode. But  it's really important to understand that these fundamentally, every component that you write  inside of your React application is going to be a functional component.

It's going to be an  actual function that is just a normal function in JavaScript. Now, this is very important, because  now when you're writing components in React, when you're writing your functions, right, React  is going to take those functions, it's going to do a bunch of things behind the scenes to them, like  add some functionalities and make some checks and make sure that everything is correct. And then it  will add it to its lifecycle and all the different steps.

And then React is going to execute your  function and everything within it at every step in the life cycle. So that's very important. And  because React does this, because React takes your functions and does things to them, you get more  functionality out of these functions.

For example, you get the ability to actually have hooks inside  of the function, right? So things like use state, right, use effect, these are all hooks from React.  But also you can have your own custom hooks, right?

React allows you to put hooks which have  specific rules. And those rules only apply when you're talking about React component functions,  right? React allows you to do that and put those hooks inside of those functions, which is  extra functionality that you wouldn't have, at least not in the same way, if you're just using  pure vanilla JavaScript and just using JavaScript functions.

And besides hooks, React also allows  you I mean, it's not only React, and it's not just React specifically. But React also allows you  to return just x from the function, right? And I'm going to put here returned like this, because  this is what actually returns from the function, you don't have to do this, you can also return no  in a component, right, you don't have to actually return something.

But this allows you to actually  put the JSX, which is ultimately going to convert to the markup the HTML markup that you see on the  browser when you actually open up the application, right? So you have functions, you can have hooks  within them, it all works with the lifecycle. And then at the end of it all, you can return  optionally some JSX write some actual markup to then show in the screen.

That's how this works.  And then like I said, react, we'll take this, I'll make an arrow here, react, we'll take  this function. And then we're going to make here another thing we're going to put here, the  actual lifecycle, let me just make this centered like this lifecycle like this, right.

So this is  going to be the actual lifecycle that react and your components go through as they are running and  as the application is running. So let me put the arrow here like this. And then we're just going  to put here react like this to send to indicate that react is the one that is actually going to  move this to the lifecycle, right.

So now that we understand this, we can actually start looking at  the lifecycle and all the different parts and how they all work together. So the react lifecycle  essentially has three parts, we have the initial step, which is the render the initial mount  when the component mounts for the first time, then we have the second step, which is the update  step. And then we have the third step, which is the exit step or the unmount step when the actual  component unmounts and releases everything that it has from memory.

So we're going to come in here  and we're going to start first with the initial step, right. So I'm going to make an arrow here.  And I'm just going to make two more arrows, just to indicate that we have more stuff coming, right. 

But we're going to just actually let's do it like this. Let's put here, we're going to put a text,  we're going to do the initial render. And I'm going to call this mount like this.

So we're going  to make this like this, this is going to be our initial render. Here, we're going to put update.  And this is going to be whenever the component updates.

And here, I'm going to put three render,  like this, we're going to get to this as we get to the step. And finally, we're going to put your  exit and that's going to be unmount like this. So these are the three steps that our component  lifecycle essentially goes through.

So at each of these individual steps, let me just put the arrows  here like this. At each of these individual steps, what is going to happen is react is going to  take your function, your component, right, and all of your components in your application, at  least the ones that need to run on that specific step, right, if you're on a page that has  only x, y and z components, only those are going to be put in the lifecycle, all the other  components that are not currently being used, they're not going to be put into the lifecycle,  that just makes sense. Every one of these steps here, the initial render the update, and then  the exit react is going to run your function and everything within it.

And that is going to produce  some JSX that is going to run some code is going to change some values. And those are ultimately  going to end up on the screen and is ultimately going to be what the user sees in the application.  So what I'm going to do here is at the bottom, I'm just going to make here another rectangle like  this.

And this is going to be the browser paint. And here we're going to put what user sees on the  screen, right. So ultimately, we're going to see how they actually get there.

But ultimately,  all of these steps here will actually end up in the browser, right in the browser paint,  and it's going to be what the user sees, whether it's something that appears, whether it's  something that updates, or whether it's something that disappears. So let's now start and look at  each individual step and really understand what is going on there. And what are the differences  between each of these steps.

So we have here first the initial render. So the initial render, what is  it going to do is when a component mounts for the first time, let's say you have an app component,  and you're just running it, and you're set it to actually show it on the screen on the current  page that you're on. If that component hasn't yet been mounted hasn't yet been used in any way,  react is going to start it in this lifecycle.

And it's going to mount the component, which means  it's going to actually run the code and put it on the screen. So the first step in the mount stage  when a component enters the actual react lifecycle for the first time is going to be it is going to  run because this is a function, we are going to run all code inside function body, we're going to  run all of the code inside of the function body, right. And that is going to be everything  that we have in this function component, maybe we have some functions that we're executing,  maybe we have some hooks, right, like you state, we're going to initialize the values of your  state, we're going to have some use effects, right, that is going to actually be also ran  in that initial step, although with a slight difference, which we'll get to in just a moment. 

And finally, we're going to get some JSX over here if it is returned from this function. And then  that is going to run to actually build the markup of what this component is actually supposed to do.  Now I said it, but I didn't write it, let me just come here and actually add another one.

So we're  going to put here it is also going to initialize all the values, right. So that's going to be  for example, use state, if you provide a default value, it is going to get initialized. If you have  something like use memo, it is also going to get initialized.

Or if you just have something like  a const or a var or something, it is just going to get set and then put in memory to be able to be  used either in the JSX or in any other functions that may belong to this component, right. So  literally, anything that you have in the body of that function of that component is just going  to get run for the first time initialized and then stored in memory. And let me just make these a  little bit bigger, because I feel we're going to run out of space pretty soon.

So let's make it  like this. And maybe we can make some more space because we're starting to write a lot of things.  But that's good, because we're learning.

So there we go, we have initialized values. And that is  going to be what happens in the initial mount, then what we're going to do is because we can have  a JSX that is returned, we are going to actually run the JSX. And I'm just going to actually put  here just return now just let's just put JSX, we're going to actually run this JSX.

And that  is going to compute to us some markup, right, and then react is going to take that. And this is  very important, we're going to make here an arrow to this JSX, it's going to take this JSX, and  it's going to pass it to one thing first, it's going to be the virtual DOM. Now, if you haven't  heard about this, the virtual DOM is essentially a virtual representation of the DOM that lives  in memory that is managed by react.

And react is going to use this virtual DOM, and then to compare  it with the actual DOM to be able to efficiently make updates to the DOM. So it's only going to  make the updates that actually need to change. And it does that using the virtual DOM.

So the virtual  DOM is kind of an intermediate step in middleware, if you will, before actually getting to the  browser and what the user sees on the screen. And then from that virtual DOM, we're eventually  going to come here, let's make another arrow, we're eventually going to reach the actual DOM,  which is going to be again, what the user sees on the screen. So we can make an hour here.

And then  we're going to make our arrow, whereas our arrow, there we go, we're going to make an hour from  here, we're going to put the hour directly to the browser paint, right, the DOM is going to go  and end up what the user sees, right. So this is in a nutshell, at least we're missing one step.  But now you can actually see how this function, this JavaScript function, right, which is over  here, your component, actuallyEventually, it gets converted to what the browser sees,  to what the user sees on the browser, which is the browser paint of this.

But there's  one more step that is important here to know that we haven't talked about. We talked about useState,  we talked about useMemo, const and vars and any other things like that, but we haven't talked  about asynchronous things. And specifically, we haven't talked about useEffect.

If you look  here, we also have useEffect, which is a hook that can actually run inside of a component. This  one will run on the initial render, but it's going to run at a later step after the browser has  painted the screen. So after all of this is done over here, after we initialize all the values  and all of that, what React is going to do, I'm going to come here and make a new line, React  is going to schedule all remaining hooks to run, that is going to be useEffect.

That is going  to happen after, right? So it's first going to run all the code, initialize all the values,  and that is going to also include initializing the useEffect. But the code inside of the  useEffect that you actually run as a developer, that is going to run and be scheduled after the  browser has painted the screen, right?

That is why we call it a side effect. It runs after. That's  very important to know.

Because now you have this, and if you need to run something inside of  useEffect before you actually are able to paint the browser on the screen, well, you can't  do that. In that case, you might do something like useLayoutEffect, which will actually run in here  before the browser paints the screen. And we'll actually hold and halt all of this rendering until  the code inside of it runs.

But if you're using useEffect, that doesn't happen. The browser paints  the screen, and then after that, asynchronously, this useEffect is going to run with the code  inside. And that's very important to know.

Cool. So now after all of that is done, essentially,  the initial render is going to be complete, you're going to see something on the screen, your  users are going to see something on the screen, and your component is going to be live on the  screen, it's going to be live in the virtual DOM in memory of React, and everything is  going to be fine. But then at some point, something will change in your component, whether  the user click something, whether you have a timer that triggers something to change after  some time, something will change, maybe it's a state variable, maybe it's a prop that gets  passed from the parent that gets updated, right, maybe it's something outside of the component  altogether, something will change and will cause this component to have to re-render to update to  actually show the new values, right, that it has.

And that is going to be the second step, which  we're going to come here, that is going to be the update. So whenever something happens in the React  application, something changes, this component will need to re render if whatever changes affects  this component, if it's props, if it's state and whatnot. And that is going to be the second step  in the React lifecycle.

So inside of this step, it is mostly the same as the first step. But there  are a few differences that are very important to know. So the first step is, first of all, we're  going to run again, I'm just going to copy and paste all of this here, we're going to run again,  all of the code inside of the function body.

Because again, these are JavaScript functions,  every time that we need to do something with them to recompute something, we're going to run all  of the code once again, and it's going to produce maybe a slightly different result. And that result  is then going to get updated through the lifecycle on the actual screen for what the user can see.  Now, because these two are the same, I'm actually just going to make them here the same color.

If  I can do that, let's just make them blue, because they're the same, right. So we're just going to  make them the same color to really visualize that this is the actual same step that is just running  in two different parts of the react lifecycle. Now the second step, we're also going to copy  this, but this is going to be slightly different, we're not going to be initializing all of the  values.

So let me just make here a little bit more space and maybe center this can I center  there we go. I really love this tool. It's really cool.

There we go. And this still makes  sense. Yeah, this is fine.

Right. So we're going to take this as well. And let's probably do  the same thing here.

Let's come here and make this like this and then make the center. There we  go. Now, instead of initializing all the values, we're going to recompute all of the values.

And  that let's just remove all this here to make this a little bit simpler, we're going to recompute any  value that needs updating in this component. So for example, if you had something like let's say  use state, right, this is not necessarily going to be recomputed, but it's going to be set if it was  updated at any point between this initial render, right, that caused it to rerender. So  if you had states that got changed, because the user clicked the button, or again, you  had a timer or something that would then be here, it's not technically recomputing, but it's  going to be updating, let's actually maybe update all values that makes a lot more sense,  right?

We're going to be updating those values, some of them will have to be recomputed, some of  them are just going to be updates that are the reasons why this component got triggered to update  in the first place. Something that is recomputed, for example, would be used memo, right, let's say  that you have something that is memoized, right, and it depends on some prop or some value or some  state that just changed, that is going to have to get recomputed, right. And then any other value  that might need to be recomputed, recalculated, changed or anything that got updated, that is  going to get updated in this update here, right.

So it's kind of the same step as this, right,  we're just doing the same thing, we're running all the values again. But here in this initial  render, we're initializing the values because they've never been created before. In this update  step, because they have been created before, all we have to do is just update them based on their  latest values, and then put those in the actual browser for the user to see.

And then what's going  to end up happening after this is while we have the same thing, right, we're going to take this  JSX over here, we're going to take there we go, the JSX and the DOM, we're going to copy this and  paste them. And this is going to be ultimately the same thing, where did my JSX go? Should have been  here.

There we go. Now let's just make a little bit more space. Oh, we're running out of space  here.

But that's fine. Can we maybe make this a little bit? Yeah, that's better.

And then here,  like that. This is as much of a react masterclass or tutorial, I guess, as much as it is watching me  adjust arrows and stuff on the screen, which Hey, it's pretty cool. There we go.

This is enough.  Let's just stick with this, right. So what's going to happen here is we have the update after  we've computed all the values updated everything, we're going to run the JSX once again,  if there's something to actually return, or write and this is important if we had the  JSX before.

And now because of some update, because of some condition, we're now going to  not return JSX anymore, we're going to return no, then what's going to happen is that JSX is just  going to be no, that's going to be an update, it's still going to go to the virtual DOM, right.  And then react is going to figure out what changed between this initial step and this step, what is  different, what updates do I need to make react right to make to the DOM. And then it's going to  make those to the DOM.

And finally, from the DOM, we're just going to make an arrow directly, let me  know so you can see it here, we're just gonna make an arrow directly to the browser paint to update  what the user sees, right, because something changed in our application, something changed in  our component, it now needs to have new values, the values that I had before what it rendered  before is no longer valid, because there's been an update since so we make that update, run the  code. And then we actually update the user update the browser, I keep mixing these things up, update  the browser and update what the user sees, right. And that is in a nutshell, the update step.

But  we're not done, we also have this piece over here, which is also going to be the same thing, we're  also going to schedule all of the remaining hooks to run once again after the update, because  we might have some use effects that have some dependencies. And if those dependencies changes,  then what we have to do is rerun the effect. So we're going to copy this as well.

And we're also  going to put it over here. And to kind of signify how can I do this in a I guess let's put it like  this, because the exit is not going to be that big. This is also going to run here as part of  the updates.

And I forgot to do this. But let's now do this. All of these should actually be I  mean, all of this step over here, and this as well.

And this there we go. And this should also  be blue. And this as well, let's make it all blue, because they are all the same across all  these different renders.

The only things that are different is here we're initializing.  And here we're updating values. That's it.

And then finally, we can actually move on to the last  step, which is the exit step, the unmount. So that happens when a component is no longer needed to  be on the screen. Now, this usually will happen as a result of some update, some value is going to  be to get triggered inside of the application that is going to cause this component to no longer  be needed.

Or it might be navigation, the user navigates away from a page. And so the component  is no longer needed. So we need to get rid of it and release all of the resources that it had,  because again, they're no longer needed, they're no longer being shown on the actual screen.

So the  first step that we're going to do here is exactly that we are going to be releasing all values from  memory, right, and that is going to be use state, use memo, and that is going to be const var. And  then anything else that we might have had in this component, memory, there we go, anything else that  we might have had in this component over here is going to get released, we no longer need this,  the memory is going to get unloaded, and we can now proceed to mount other components that are  currently needed to be shown on the screen. And then what we're going to also do is we're going  to run any cleanup function that we might have, for example, in a use effect.

So we're going to  do cleanup. I mean, we're going to do runs cleanup functions. If any, I should not just not put if  any, we're going to do here use effect to keep it simple like this.

So if you have a use effect  that has a return function, right, this optional cleanup function from use effect, it is going to  get run to clean up after itself. Because again, you no longer need to have all of this, because  the component is going to get unmounted. And actually, we need to also put this I forgot to  do it, we also need to put this over here.

So not in the initial render. But whenever we have  an update, I mean, yes, it's a bit complicated. But let's put it here.

We also have this running,  right? Where did it go? This should be here.

Yeah, this should be here. I made a mistake. But there  we go.

Now it's here. So what we also have in here, I forgot to say in this initial render is  that after theSo here, this is the initial render, but before we update, so something happens, we  trigger an update. And actually, I guess it's more explanatory to put this one here as well.

It's  more explanatory. No, let's put it in the middle, I think it makes more sense to put it in the  middle. And the reason why, because this kind of happens in between two renders, right?

I mean,  React handles all of this, and you don't really see this. It's technically more part of this  initial render, because you're still having all the values from this initial render in here.  But if you have a use effect, right, I guess let's put it here, if you have a use effect that has  a cleanup function, before we get to this update here, what we're going to do is we're going to run  this inside of this initial render with the values of this initial render to clean up after ourselves  for the same reason that we're going to do it here inside of the exit when the component is no longer  needed, we're going to run the cleanup functions to clean up after ourselves.

Because whether the  component unmounts, and we no longer need these values, so we run this function to clean up, or  whether we actually no longer need the values of the initial render, we still want to run a cleanup  function to prepare everything for the next render with new values. So that is what React is going to  do, right. So that's a very important step, right, every time that before we get to an update, we're  going to run the cleanup function.

Now, again, this is going to happen every single time that  we update the component, every single time, we're also going to run all of these cleanup functions  over here, right. So let's put them maybe after this, let's copy and then paste and let's put them  all here. Because again, all of this runs right before we get to the next render to clean up  after ourselves.

And then going back to here, after all of this, so what we're going to do is  we're just going to take all of these processes over here. And let's make them like this. And  then can this be smart like this, I guess we're going to do it like this.

Right after all of this  happens, right after we exit and unmount apologies if I got a little mixed up here, but I felt this  was important to kind of teach. After this exit. And after this unmount, we're just going to  update the browser, right.

And we're going to do this again through the maybe I should put  again, something like this. So let's actually do it more like this. In this case, we're just going  to take this and the DOM and then the arrow to the DOM like this.

And we're going to copy and paste  this here, we're going to put this the same color, because it is ultimately the same color. And this  one is now going to go, can we put it like this? Oh, beautiful, beautiful, beautiful.

Right. So  we're going to run all the cleanup functions, it's going to go to the virtual DOM react is  going to see that, hey, we no longer have this component. So everything that it needs, or that it  was previously shown on the screen has to go away, it's going to send those updates to the DOM.

And  those are going to get sent to what the browser painted what the user actually sees, right. So in  a nutshell, if I can just maybe make this a little bit smaller, so we can all see it together in just  one shot, in a nutshell. Oh, okay, well, there we go.

That's a balance that we can have between size  and actual readability. So we have the function component, right, all of this goes through react  in the lifecycle. And then we have initial render update and exits.

And then all of this essentially  updates what the user sees and what the browser shows on the screen. That is in a nutshell, the  react lifecycle at the client level. Now we're just going to spend a couple of minutes not too  long just to look at how this works in the server.

Because like I said, in the beginning of this  video, that's also very important. So we're going to come here to top and just make this a little  bit more clear, we're going to put your client. And this, we're going to make this maybe extra  large.

So this is going to be the client. And then we're going to take this because ultimately,  this is almost the same. And actually, we're going to do all of this here.

And we're going to  come here at the bottom and paste this here. And now we're going to do this on the server side of  things. And let's see how react behaves on the server.

So on the server, we still have function  components. So there's still JavaScript functions, they work almost in the same way, at least  when it comes to the actual function behavior of JavaScript. But now on the server, we're no  longer going to have any hooks, right?

Because on the server, we don't have hooks, we don't  have this concept of something that actually, like this component, this function will never make  it to the client will never make it to the user, it is going to get run once on the server is going  to generate some HTML. And that HTML is going to be what's actually get sent to the browser. So  we have no more hooks or anything like that to worry about.

The only thing that we have is this  JSX over here, but it is going to get returned as HTML, right. And that is going to be all that  this component is going to do, it's going to compute something, right, and then return some JSX  that is going to get converted as HTML, the same way that we do it on the client side, but that on  the client side, we're actually returning all of that JavaScript with the component on the server  side, we're just returning the HTML markup that was generated from the component. And then we're  going to come here, we're going to take this thing that the browser paint what the user sees, we're  going to put it here, because ultimately react is just going to directly send this to the browser,  it's not going to go through a virtual DOM, it's not going to go through anything, it is directly  going to go to the DOM on the browser and update what the user sees directly like this.

So from one  point of view, this is actually faster, because we're only sending HTML, we're not sending any  JavaScript, and we're sending it directly to the actual browser. The downside of this is we don't  have hooks, we don't have a traditional lifecycle, right in the context that we just learned about,  all that we have is a function that runs once, and it just returns some HTML through JSX. Now, I'm  going to make your little note because it is very important, we're going to put here just a little  side arrow.

And let's make this arrow maybe Yeah, like that. And we're just going to put runs on  server only, right. So this is really important to really kind of understand, let's make this small,  I guess, yes, small, right to just cement this that this component will only run on the server,  it never makes it on the client, the only thing that makes it on the client is the actual HTML  that gets returned from this function.

And then another property of server components is they can  optionally be a sync like this. So you can have a asynchronous component, I put it here optional,  you can have an asynchronous component that can run on the server, because it's on the server,  it can be asynchronous. And if it's asynchronous, what we can also do is we can come here, we can  make this we can also optional, we're going to do this optional, actually, like this async.

If we  have a sync, we can fetch data, right. So that's going to be, for example, from a URL, or from the  database, or from wherever you might want to fetch data, we can also do this in a server component,  we can actually fetch data, run it asynchronously, and then generate some HTML, and then send that to  the browser in one pass, instead of going back and forth to the life cycle, like we usually did. So  on the server, there's no traditional life cycle, like we had before, there's no concept of re  rendering, there's no concept of something updating, right, you just run the function once,  and then whatever that outputs gets into the client.

And that's it, that's where it ends. Now,  the thing is, in some cases, in a lot of cases, actually, you want to update that data at some  point, as a result of again, something happening, a function runs a timer or whatever, you  want to update that. But since on the server, there's no concept of re rendering, it works a  slightly different way.

It's a simpler way, right, there's no life cycle, but it's a way that is  important to know nonetheless. So usually, what's going to end up happening is in that case, you're  going to have some function here that's going to run in server in the server, so you're going to  have some function in server, right, that's going to be a random function, whatever function, a  server action, whatever you want to call it, that's going to run in the server. And that one is  going to cause a, you're going to have to call it, it's going to cause a revalidation, but you're  going to have to call it manually, you're going to have to call a function, I'm going to give you the  example that you might be the most familiar with, which is the next JS example, you're going to call  revalidate path, and then you're going to pass your the path, let's assume that it's this path  over here, you're going to call this over here from the function in the server.

And that one is  going to go and is going to trigger this component to rerun to rerun all of its code, regenerate some  HTML, and then that HTML, we're also going to be sending it to the actual browser. And let me just  make it here, like this curved, so we can actually see what's going on, that is going to get updated  through a HTML request. As let's just put HTML through HTML, that is going to also go and update  what the user sees on the screen.

And let's make all of these maybe like this, like this, this,  this, this, and that, let's make them red. There we go. I love this.

This is beautiful, because  that's really important. And also maybe this one, right? Whenever you want to update something, you  call a function on the server, that function you call here, revalidate path.

This is the next JS  example, it might be different than the tool and the framework that you're using, that is going to  cause this component to rerun again, it's going to send some more HTML through a request. And that  is going to then update the screen, right? And usually your framework is going to be the one that  is handling this, right?

That's in a nutshell, how this all works on the server, and how this  is different from the client side of things. And it's very important, because if you're going to be  working as a React developer, you're going to have to do a lot of things on a client. But you're also  going to have to do a lot of things on the server.

And more importantly, you're going to have to mix  the two together and optimize when it makes the most sense to use the server and when it makes the  most sense to actually use the client. So this is really, really important. And I hope that now you  have a very good understanding of how React works on the client with the lifecycle and how React  works on the server when you have no lifecycle and you just have HTML and components that just return  HTML and don't have this concept of updating or rerendering.

If you enjoyed this video, and  you want to see more videos just like this one, make sure to leave this video a big thumbs up.  You can also click here to subscribe. Or you can click here to watch a different video of  mine that YouTube seems to think that you're really going to enjoy.

And with that being said,  my name has been Darius Cosden. This is Cosden Solutions. Thank you so much for watching, and  I will see you in the next video.

Ciao, ciao.