 Good evening everyone. This is Mahesh and I should really be thanking you all to organize this story in this community And I'm really glad to be here cool, so obviously I'm talking about React life cycle methods and they're probably Few months back we got a big news by Dan Abramow mostly that a lot of Component life seconds are breaking deprecating Changes he launched hooks which Kean talked about and a lot more things are happening, right? So probably the agenda of today's talk Major least two Week together will take a deep dive in what exactly is React life cycle methods. What are the new changes? I'm not gonna talk about the older one because that's sort of has not and not be in context or we should not Care much about that. What was earlier? So it is all about what are the changes and the from The moment a component renders or it starts to what happens until it is unmounted We'll talk everything about it. Just even before I start. I just want to know that how proficient we are on react Life-cycle methods are so that I can Decide that how much deep should I go is it experts any experts? Everyone's laughing Okay, oh one expert. We have got one expert. That's great. Okay, so immediately. I'm thinking just medium So even I can relate that. Yeah, it's not that straight forward. So let's try to jump into it Okay myself. I'm Mahesh. I am full-stack developer and I love react here And I'm a storyteller. So I do share or some podcasting on YouTube. That's a Hindi language So that's Indian. So you would not understand and I'm a blogger I am quite active in medium.com my few of the blogs have got published in multi language Right rest API guidelines react component life cycle methods and few other stuff. You can follow me on medium Let's be connected. I'm open source contributor as well. Like I have got to couple of NPM library like in hooks and Using tooltip react tooltip and yes in India just before Singapore. I was in India I did couple of a lot of react training in India as well as South Africa So, yeah, and I'm ex-mikin see and right now I'm walking in a starter. I'm a tech lead That's me on a summary Let's start. Let's start our deep dive Before we start with the what exactly is component life cycle method. This is the one-line intro of react There's the official introduction of react. That says react.js is a JavaScript library for building user interfaces If you see I did bold user interfaces. So in react, we only create user interfaces What is into user interface user interface is any area any zone where user goes Interacts and basically he commands. So that's why it's an interface which is Led by the user and we as a developer we provide that playground for the user to Interact with our app. So that's it user interface now cool Why should we discuss and why should we know about? react life cycle method that's Before you've been going into it Knowing that is really important because you should know the value and then we should be doing Why exactly we are learning and why exactly you should be listening to me on this talk? So maybe I just want to Put out put one analogy that how exactly react looks like. So if you see this is a bunch of television and The every television has got its own connectivity to power its own connectivity to maybe Compact displayer so that you can control every of the television on its own and this whole Combination is react every small Television is a component and you can control individual component on its own right so so For example, why how what is the role of? Life-cycle component methods for example, you want to program your all the television that whenever you start television number one It should show up this is television one and this of this brand and then it starts Displaying and then probably you want to control on the television number three that whenever it starts Whenever someone changes the channel, it should show a different message so that you can have more control and these are components We'll come back to on this again Taking the same analogy on the interface so we can actually divide the whole Every portion of it as a separate component and each component has got its own control for example whether show or not or for example when you When you click on follow button it can actually call up API so so the other components need not know about what exactly the other component is doing Now as I was saying that you can actually Connect every television with its own compact displayer and that's why if you hear a lot mounted Did mount will mount so you can actually imagine that whenever you mount a disc on the compact displayer That is will mount a dead mount or This analogy is just to set your expectation that whenever we will talk about Did mount will mount did update how exactly we can relate with with the Compact displayer so whenever we say mount so you what do you exactly do you take a disc compact CD and then you mount it on the player and it plays from there. We'll come back to on it again Okay, why life cycle is important because though that was more about setting up the context now We shouldn't discussing we should be discussing why life cycle is important Everything everything in this universe goes through a life cycle you Maybe any company any tree Everything goes to us life cycle method it takes birth it grows it grows and one fine day It starts degrading and one fine day it will die And scene happens with our react component as well. So it Will prepare itself to mounted or to get birth Onto the browser and browser is that Area or that player where it is going to mounted or going to be played around and then It will update get the updates That is where it grows because it's taking new update by clicking off the button taking new props setting up Changing the state that is updation and then one fine day when you close that model for example or close the website That is where it is it is unmounted Okay, and to apart from that also Why we understand that right that it is important and why it is important because if you know That if you know the hook points that at this point of time something is going to happen You can plan better right for example, maybe take yours your example when you are about to get birth Your parents did plan some stuff for you, right? You are coming or maybe you were not that welcomed That is another story if you would okay, so Whenever you're getting going to get both your parents are planning that okay one fine day All the toys all the clothes needs to be there And when you are going to good get to the school and your parents know that at this point of time My child is going to the school. I need to search a better school Imagine if your parents never knew that what time you are getting birth or what time you are about to go to the school Then they cannot plan efficiently and same happens with us also as For example, let me give you the example of YouTube for example, you want to optimize your YouTube app and Obviously YouTube buffers and takes Battery and it takes your network bandwidth as the resource which comes into buffer the video now if the user Switches back to another app. Then actually you can track that whenever this app is out of focus I can stop the buffering. I can stop taking the battery. This way you are optimizing your apps and If you know all the hook points Where and what thing is happening? You can plan accordingly in a better way, you know very much efficient efficient way, okay So that is that is why it is important and we should be talking about it in detail. Okay talking about phases These are the three phases Mounting updating unmounting as I talked about told you that whenever your component is about to Mount on the browser You get one set of function where you can perform something That is where the that phase is called mounting phase when it is It is still not mounted yet But it still it is in the process and then when it is mounted already now For example, if the button clicks on if the user clicks on some button So it is updating it is getting updates whether that is a state update via props or some some others some other way So that whole phase is called updating and last is unmounting obviously when the Component is going to unmount or get close for example If you hit back button or if you hit submit button it should go to next page or if you hit the close button in a model So that model is going to close so you can do some some stuff. So we'll we'll go in deep in that Okay, this is the end state don't get confused or don't get In a problem that what exactly is this because the same was my reaction when I started with React that what exactly this diagram or what exactly the whole life cycle component is So this is our industry by the end of this talk my target is so that we together should be able to understand Decode every part of it. I know few of people already know but I'm still talking in a journalizer so that everyone Is on the same page. So by the end of the talk, we should be able to understand this diagram Okay, what is it matter? I already talked about we should know the hooks so that we can better optimize it This is again the same analogy which I tried to put that every component has its own control for example You as as a person has got your own control and I as a person has got my own control So we can finally run our Life-cycle methods for example When I am ready to go to school in the similar way you will get your own when you are ready to get go to the school That's why everything is separate every component is separate Okay to now because we are going to get the deep dive in the each of the methods of life cycle of the react life cycle let's Imagine that we are going to build a Contra music player some music player so that we can better understand that in which use case Which method is going to be used? Let's start with mounting. So mounting is that phase Where on the browser the dorm or the component is still not mounted? It is preparing itself to get mounted on the browser for the first time So the first function is obviously constructor As we know in even in oops also the construct is the first function that gets executed Where you can do the steps like setting up your first state initial values and you can set you using the Default props you can also set the default props as well So for example if you want to do a start your music player with a value of volume 70% and state as a spouse You can set here so that your component whenever mounts on the browser. It is starts with this value So we should it's pretty straight forward initially in the previous version of react that is 16.3 and below there was another method called component will mount and What exactly happened that comp and if you see that component will mount and the constructor are Pretty much same so constructor also call gets called first time before render component will mount also gets Called first time only one time before mount so and even there was a huge discussion going on that We should merge it and finally in this 16.4 we merged it and we have got only one that is constructor The next method is static get derived a state from props Let's try to decode it if you see this method is used for getting the derived a state from props now What is the use case a lot of times as react developers? our state depends on prop For example when you pass a prop as a function and then you Your your component depends on the props and you want to sync it so this is that case for example That's why the the name is pretty much very clear that get derived a state from props So we want to get a new state from props whenever the whenever state is dependent on prop for example You are setting this state age value from date of birth, which is coming from your props So you will do some processing You will take the date of birth current date minus and do the number of years or age and that you will set it to the state So that that kind of conversation or that kind of conversion happens in this particular method This is just to give an example for example And this is a static so you do not get the access of this And you you will get you will be getting the props and a state only So you can actually do you can compare that a state dot value is not equal to props dot value then you actually return a new state and You can also return a null when it is null it does nothing when you return a valid object It merges with your original estate Whatever you started with on the constructor so for example, if you say your Props is dependent or you states is dependent on props and that is a function which processes something So this is that use case when you're you want to sync your state with the props and do some calculations on processing Next method after constructor and then one method gets called get a state Get get derived a state from props and then actually the render happens in the render This is that method where equivalent HTML DOM is generated and then it will be sent to the browser So render is the final method Everyone knows that because we start with render, right? and then Actually mounting happens after render processes one particular object with your props with the states and everything it generates one Dom and then it mounts it and one another function is called that is component did mount as the name suggests that component did mount It says that component has already already been mounted to the browser and what is the use case of this? for example, you want to access the Dom and you want to use jQuery library to set the graph or maybe D3 library to set the graph on this value so whenever you want to access One particular or Dom it has to be bound mounted on the browser First so that's why all the calculations all the processing of graph or you want to use high chart or some other Library which accesses is Dom then you need to do all this processing and component did mount Because just just try to understand You have got your reactor world where and if you want your high chart to take the Dom Then high chart doesn't know what react is or what their internal processing is happening He high chart only knows browser Dom which we see in the elements in the console of the probe So that's why now once the component is mounted We are pretty much sure that my component is on the browser and another library can access the Dom to do some processing or modify it Okay, so this is just a quick deprecated methods which Have been deprecated from 16.3. So component will mount has been removed Complaint will receive the receipt props has also been removed Component will update is also removed. We'll talk about these two fun these two function in next life cycle And right now it is not totally removed. It is just prefix with unsafe and in react version 17. It will be removed So you're free to use and why they have done that so that you can slowly migrate to new life cycle methods or using hooks and all and Just to remind why this is again important if you want to totally understand hooks Then also understanding of react life cycle method methods is really important because hook is is Is the side product or The result in to make make your whole life cycle method is a little bit of easier That is that is the hope so we should be understanding late react life cycle better So coming to that particular diagram We have already talked about constructor then after constructor we call get derived in straight props then it renders and then It commits to the browser it sends to the browser and then finally we run component Did mount now we are going to talk about updating So this particular process this particular phase is then the component has been mounted already and render function has ran At least once or the first time So when we start the with updating updating can happen by Basically three rough base one is when you change the props props if you do not know what is prop prop is like function parameter So component is a function and props is a parameter So if you change the parameter of props then it will update your react component or when you change the state The internal state of your component then it will update the Component another way is another function that is force update You can from any point of time you can forcefully update your react that is force force update Which is not recommended bad practice. So we'll talk about the Update by props and update by state. So the first function is obviously called get derived a state From props. So this is the same method which we talked about when you want to sync your props and state And do want to do some processing. This is the first method that is get called and then after Get derived a state from props. The next method is called should component update as the name suggests It says that it expects true or false, right? So it is a question. Should it update the Component so yeah, so you can for example Your any render of component processes a lot of values and it goes through a heavy cycle And you want to get control on that whether I Every time some prop or state changes do I want to re-render the component or not? So you can control that thing in this particular function should Should component update and if it returns false then it will not go to the render It will not reload or it will not be remounted and if it returns true Then it will go to the render and remount it and if you do not write this function by default it returns true So we have more control But using we should be using it very carefully. This is again not recommended even by the official reacting But some cases we need to so there's just a quick example in the should component update you get the Next props and next state and the current state and current prop is available in this So you can do this dot props of this dot a state and you can do comparison and you can actually return a boolean to have a More control on a component rendering So this is what I'm talking about from the diagram that after we get a new prop or we change by set a state We get the get it get derived a state from prop after it passes We go to the should component update if it is true It will go to render if it is false. It will stop over there Updating phase obviously then after the after this particular Function the next function that is called and this is again newly introduced in 16.4 get a snapshot before update this is When I started on the day one when I tried to understand this was pretty fine This took a little more time to actually understand it I hope that I'm able to convey the same what I understood feel free to question me back if you do not get it So get a snapshot before update. Let me first tell you the use case. Why and the bench do we need to use this? This is One of the very rare function you will use but it's important to know for example you are doing a tooltip and While your tooltip is moving you change some state and your component reloads then there is at the worst condition There is potentially some chances that while you are moving it and the component reloads You will lose the track that where or you will you will face few of the laggings That because while you were moving it it re updated and as the react Versaildom works that whenever at in a binary tree in a tree of a component whenever it sees Delta It deletes all the child and it re Reattaches all the parent so at worst case for example if you're moving the tooltip and something gets update you might lose this Animation you might lose this flow. This will be not a smooth and same applies for your Scroll bar as well for example if you are Scrawling up and down and you are showing a list and at that point at some point of time if API responds you back And you update the state at some point of time you might lose the track So get a snapshot before update is a function where Before writing to the browser you get the previous state and you just wire it up I'll let you know I will talk about it. So Let me tell you can show you a quick example So you can see here that I got get a snapshot before update and as the names suggest that I want to get a Snapshot of the component before it actually updates so that I can continue after it is updated I think you will get it. So we get the props. We get the states and then by doing some Calculations or whatever logic is there you can return an object from here that is a snapshot you return a snapshot and The whatever is snapshot you return that is snapshot is Caught in dead update and did update is similar to dead mount So remember dead mount in a whole life cycle dead mount will happen only once Because you're saying that how many times your component mounted? It's only once but did update will happen Any number of time update is happening, right? So this is that component component did update So in component did update whatever you return here You will get here a snapshot and here you can set that current is crawl height is from the snapshot So just think that you were moving a tool tip and here the update is happening Before actually rewriting on the browser. You're taking the current is snapshot and it updating it and you are passing it to the newly updated DOM The older is snapshot so that you can wire it up As simple as that try to make it simple, but yes, this is the definition and this is where it is going to be used Does it make sense? Yes, no Or should I repeat? Yes, please Then Yeah, yeah, you got it, right so big because On every because you see this particular function will get called on every update on every update This might not be the condition that I want to I am installing so you your If this condition is not met you did not lose your Flow then you're returning null and if it is null then that you are skipping that from that condition and Whenever on that specific case you are handing over or you are continuing that flow Okay, so this get a snapshot before update as the name that get a snapshot Before actually updating it so that I can hand over after it is updated as simple as that And obviously the next function is component did update now as I was repeating that component did update Mount will happen only once and after rendering or mounting whenever you update wire state or wire prop It will always call that did update so that you can again now the use case for this you can again what if in component did mount you said the Highly D3 or high charts library to access the dome and now whenever something has changed now You should be again telling high chart that now update again. So this is that function in did update now You will get a notion that we are duplicating few of the things in didn't mount and in did update We are again duplicating it then obviously you can Solve it in various ways like passing a call back passing a function or taking out in a separate file something like that but that can be solved and Then obviously and after did update before did update we get the render So it happens the render and then get a snapshot before update and then it did update Yeah, so I talked about did update. So maybe let's have a quick look What exactly and where we are in terms of our end goal? So mounting we understand constructor happens and then we call get derived state from props And then in mounting the render gets called then here is that process in the browser It is writing it is committing to the browser and then it calls the component did mount After it is mounted then updating starts update can be done by three ways new props or Changing the state by calling set a state or force update when you do force update it directly Goes to it again passes through this function and then it directly goes to render It does not go to should component update because you are saying that falsely updated and it does not call the did update When talking about new props and set a state Should component update we talked about if it is true it goes ahead if it is false it stops there Then render calls then get a snapshot before update now you see that here is the Function Moment where commit is happening commit to the browser So component did a snapshot before update It takes the previous snapshot and handed hands over to component Did update so that you can wire it up Cool. Does it make sense? Now the next next is unmounting so when you are closing the model or when you want to close or collapse this This particular component This is where that function is get called and the use case is pretty much a straightforward Maybe you want to destroy all the charts you want to Remove the linkage or remove the library high chart library. You want to clear the user session You want to log out the user all those clearing stuff happens here and obviously If you see in this particular diagram in unmounting there is no component did unmount Do we need that? We cannot actually for it's similar like when you are about to die Just let me know i'll come you and give you water or some kind of food And then I say that when you died then come back to me tell me that when you died So obviously if something is unmounted they cannot come and tell us so that's why after will unmount there is no did unmount Cool Integrate api call. Okay. Yeah, this is important. So now in the whole life cycle thing There's one of the very important question. Where do we integrate the apis if you want to call api? So that should happen component did Amount mostly, but there are some other use cases for different kinds of use cases, but it should be here why here And even when component will unmount was there in the react. So a lot there were a lot of confusion around the whether it should be in component will unmount will mount or component dead mount So the straightforward answer is that For example, if you're doing server side rendering as well, so server side rendering will call constructor will call throughout the Render it will not commit and it will not do the dead mount So if you put in constructor or Some other Function before committing it to the browser Then on the server side rendering when you are generating your html files for seo Optimization it will try to call the api even if it is not loaded on the browser So you should be doing on this part. That's why this particular lower Side is mostly when it is on the browser did update or did mount So please make sure that you integrate your apis in Dead mount and obviously You want to call api once and not every time component update mostly But there are some other use case on every button click you want to get response in that case It will be did update But whenever the use case is that you just want the api call on load it should be going here in dead mount Does it make sense? Yes I'm answering Okay, okay. Cool. Thank you. That was it and Yeah Stay in touch I'm new to Singapore just two months back. I moved here. So let's be connected. I'm happy to Discuss more. Let's get over some coffee or invite me on some dinner. I'm happy to join Cool. Thank you so much. And there is a quick feedback form if you can feedback Give me some feedback that will be helpful took for me. You can either scan or you can take the tiny url Thank you so much guys. It was pleasure. Thank you. You're on for inviting. Thank you