ReactJS Components Life-Cycle Tutorial | React Tutorial for Beginners | Edureka Rewind

Key Takeaways

hello everyone very good morning good afternoon good evening whichever is according to your time zone so a very warm welcome for the react.js components life cycle so in this session we'll talk about basic introduction about the react.js components especially the props and the state and we'll see how it can be done all right this session we are going to talk about react components props States flow of the stateless and stateful components life cycle of the components and possibly Hands-On so now let's start with the react components for those people who are not aware of react perspective why react came into picture let me give a brief introduction here it so happened that in the classical approaches we had many people dominating the world let's say you have Java python actually python came little bit later but Java was predominantly dominating it dotnet and let's say PHP these are the predominantly used ones java.net and by a PHP as a programming perspective till html4 say before 2011 it was a normal classical things wherein you had this web application developed in a simple manner made in three tab application where uh the client was talking to the application server and the database server entirely so maximum what you had in terms of the client validation is you had something like say Ajax implemented where the client can talk to the database and get the responses meaning to say something like this let's say if you go with google.com in here you tried something let's say you go with the react Js whatever you see as an output here in this kind of output this is based upon the Ajax implementation which is developed using JavaScript this was the maximum thing which was there but there was a problem in here the problem is let's say if you talk about uh the web application development let's say if you have one page that needs to be loaded and this page is going to consist of somewhere around let's say 250 MB resume I'm just giving a hypothetical number here if this page is 250 MB each time you refresh a page the 250 MB is going to be coming into picture so two times you do it becomes 500 MB four times you do it becomes 1 GB right so presume if your application is very like say too much of data is included and it is going to be 250 MB for request this is capital B not small B maximum four times you refresh the page your 1GB is gone and today if you see a mobile applications as 1GB to a 2 GB predominantly used by the people so four times if you refresh that's it your application is gone so this was not an effective way of doing things so during those days let's say uh our code was there in 2005 to 2010 and eventually Facebook came into picture when Facebook came into picture it was more like say they started this or could perspective and they opened up their feeds and all those things the page in here was having so much of information like this so on here you have the links you have the status to be mentioned and you have the feeds which can come into picture and some other links which is going to be there so let me take up an example here to Showcase that something like this we're in you have lot many things which is going to be there you have some information here which is going to be the links if you click on that the relevant page gets loaded up here and in here you have lot of feeds the more you scroll down the more feeds get loaded up and so on if you see here if I have some data which is going to be loaded up let's say I have around 100 let's say items to get displayed all the Android items will get loaded up in one chart and your total internet data is gone why will somebody use this kind of things right now imagine if we give something like say a dynamic perspective meaning to say you scroll I'll load the information and how much you scroll so much of data will be there and in here I'll only load this information I'll not load this or load this or load this or even this whatever you scroll the information will get loaded up here only specific region will get loaded up and rest of the places nothing is going to be getting loaded up unless you're going to use it so if the page is going to be having 250 MB and this particular component is going to have only 10 MB every time 10 MB gets loaded up mean to say the next component 10 MB in the next component 10 MB so here near 10 pieces in year 10 pieces and linear 10 pieces or 10 links for 10 links 10 MB effectively to reach this 250 MB you need to scroll at least 25 times only then 250 will come into picture so effective utilization is going to come into picture right so to have this kind of implementation Facebook is actually developed with PHP to be very honest they integrated the implementation in such a way that they can come into I mean acquire this so they introduced a new technology when HTML5 came into picture with CSS and JavaScript so till then JavaScript was very minimalistic used and those days the browsers were IE Internet Explorer browser which was having a lot of issues but after the introduction of this chrome and Firefox things evolved very quickly to accommodate whatever is the latest technology stack and JavaScript actually played a major role in here the birth of react.js came into picture and this reactors if you see here it is a JavaScript oriented approach HTML CSS is anyways there on top of it we Define the JavaScript so HTML and CSS if you talk about HTML is used for the structure CSS is used for The Styling and the JavaScript majorly is used for the behavior so you can control your application completely from the JavaScript perspective and you can manage the show and this is what react just offers you which can help you to structure any web application in such a way that you can effectively make use of the JavaScript and which can help out in a very good user uh interaction and data saving also and you can keep people engaging with the technology step and this has opened up a very big section so when we talk about this kind of web page here if you see you have different layers here or what we call it as different components you can have all these components separately designed so that is what the react.js components which we are going to look forward the react.js components on a browser might be different meaning to say each of them whatever you see here right this section or this section or this or this one or this one or this one or maybe the top layer all these things are actually different components something like this component one component two component three component four component five all of them are kept on this page individually as the resembling that they are part of the same page in reality they are different though it is coming as one page view it is not actually one page view it is a integration of multiple section so in the complex terms if I have to talk about or in the Gish terms if I have to talk about these components are embedded and integrated as one application majorly like say you can talk about in today's world like say single page application perspective SP okay put all your components in one page update the rendering part on each of this page based upon what the user is performing as an action if the user says I am going to click on it or if the user does some scrolling keyboard and mouse activity capture that and do the job for your coding perspective update only this area without updating any of the rest of the components here that becomes much more easy to work and evaluate so with that being said each of these components are actually getting updated or changed without disturbing any of the application or rest of the application here which will be very much interesting to do the coding but how is it going to be involved so we have something called as UI tree meaning to say The Logical process or logical pieces which is going to be connected to from a single section what we call it as like say apparent to child component distribution and so on in here the distribution is going to be from the perspective of logical pieces so e as I said each of them are component so each of these components if you talk about are integrated sometimes meaning to say it might be integrated in the same page or it might be integrated from one is to two like this so let's say if the parent component is one it is having an let's say references to the child components as two and three it's an integration not a let's say a clubbing part it's more of an integration one is integrated to two and three and two is integrated to four and five meaning says say The Binding happens so any changes sometimes you might look around like say if you want to add up something some data here and you want to pull in here you can pull in here and you can work on with it so what let's say if one is if you see a one is directly connected to four and five but it is not directly connected it is indirectly connected from two it connects to two from two it has a child component and these are induced components so why we have this kind of an approach is because of the behavior you take up a behavior based upon that you change it let's say I want to guard only with feeds as a Facebook feeds now individual first page the component you click on that let's say if you click on the feed section are the basic links which is available in the Facebook the first link which is there you click on it you get the page loaded here well this is more of like say you have this iframe kind of a concept so iframe is going to load this second component now second component has multiple things the more you scroll the more data will get loaded up it might be let's say your friends data which is going to be coming up into picture here so this one page 2 is going to be giving you the list so your friends and family members whatever whoever is going to share some data that is also going to be listed here and on this section the interest let's say you have an interest which is going to be like say programming or maybe like say dog trainings or food or something those videos are subscribed um sub Pages or something will get loaded from this particular section so both of them will get loaded up one after the other but it is not going to load as though well let's say it is going to load as though it is the same page but in reality combination of these two will get loaded up here and the page here is you have this link which is the first link you click on that the data gets coming into picture and in this data 4 and 5 data will get loaded up so this is component to this component one so integration wise it can happen in eBay the way you design it it's up to you though it is integrated it gets triggered only when you call it or else it will not get triggered and the changes will happen only if you do some change Alexa some actions on that the rendering part happens something like that so let's take a simple example here let's say in here we are going to take up our component one class and which everything is done from the react component you are going to extend the react component and there is a method called as render render method is going to render you the information on the page whatever you want to give it as HTML and CSS perspective is going to be rendered from the rendering perspective Dynamic loading happens so this is used for dynamic loading meaning to say you don't have to refresh the page the moment you scroll down the pages will get loaded up I'll give you an example here let's say I'll talk I cannot show you the Facebook part let me take up something like this uh let's say we go with youtube.com okay so please have a look at it what is going to be here in here let's say we have this let's say the scroll bar this big and you have some videos here all right so the more you scroll it up the data gets loaded up here you can see that it's getting loaded up right so once you are loaded up with this data you can see the scroll size is no longer the same size it is small now why the Dom is getting loaded up with the data I did not press the refresh button here however the more I scroll the more data gets loaded up and the more data gets loaded up the scroll size will get started going forward check this out like this previously it was big now it is small because the Dom is now loaded up with lot of data so this being said how you're going to achieve out of it the rendering part so the more you scroll the more you get loaded up and that rendering is dynamic rendering and in here you're going to use the code so usually we take up the return statement which is let's say method here and you are going to return the statement so this is a method and you are going to give the return statement so there are four kinds of methods uh one method the methods are let's see with arguments and with return type without arguments with return type with arguments without a written type and with arguments with return type so in here we are going to take up the without arguments and return type here so this is the method which we are going to take it up in this kind of programming and we are going to return the HTML code in this HTML code we are going to use the major sections like say something like you might be using the division tag and tags and so on so that the differentiation can be coming into picture very easily uh let me show an example which can be much easier for you to understand let me take up the direct example which is like say facebook.com which can help you to understand this so if you see this page you have a lot of components loaded up here but if you go ahead and inspect it you can see lot of things most of your components are only div based division based here because they are trying to like say divide things if I keep my mouse over here and take a screenshot sorry let me take a screenshot because if I move my mouse you will not be able to see that let me open up Ms paint and show it to you and paste this value here so screenshot and paste it okay sorry this is not correct work properly observe very carefully each of them are divided here specifically the page is divided in such a way that this is one area the second area this is third area this is fourth area this is fifth area this kind of Divisions can be really achieved with respect to this div components majorly used in most of the uh react.js based web application you can see everything coming into picture in here two different tags whatever you see inside this each of this uh let's say if I go with this kind of implementation or if I go with this kind of information you have this tax h2 tag and you have a class and you have some information here which is going to be displayed so this is what we use it tag and the information The Styling components to be very honest just like the way we have headers in our web application in our application perspective we can use this address so with these kind of combinations the sizes of the font will get changed and you can render the component here with respect to the information so we are going to have this as component one and you're going to render the page as content okay so once you have this components ready I mean any HTML tag is going to be opened up and it's going to get closing the closing tag comes into the picture similarly you'll have this component one closed here okay so it's getting closed as a react Dom render document object management and you're going to use this document.kta limit with respect to the content we'll get this data so when you do that your information is going to be available now the next part comes up is let's say if you're going with the transitions or let's say uh connecting page 1 to page two or component one to component two majorly you're going to connect it via the props or the states the props is nothing but let's say if I'm going to add up some values my name there or my age or my University or my country location and so on I want to change it I mean I want to pass it to the child component so that can be done from the perspective of props meaning to say I have somebody let's see I am going to say welcome Ramesh so my name and it can be something else let's say Suresh or let's say Monica or let's say we have something to say Deepa or maybe somebody else so these informations are going to be passed down to the child components because we are having page one here component then you have components here again and so on right so whatever is there in here let's say the first page logged in you get the information and every time the you go into these Pages you need domain and if they are using that component or the properties in the let's say child page components it has to get the information which is already there from the previous not querying the previous value but the current instance itself I want to go into so instance value if you talk about we talk about like say this dot prop name okay this dot prop name and you give the information X let's say Ramesh and so on so when you talk about the current instance the logged in instance should be maintained and it has to make sure that every data should be passed across to achieve that properties are used which is which we call it as in chart props we Define a prop in here in the parent component and when it comes to the child component we actually use this dot prop name to get the property and whatever name has been assigned for example if it is assigning Ramesh here Ramesh will get displayed if you are assigning Suresh Suresh will get this date that's why it's going to take it up the second one is state state is going to be telling you what is the current situation from page 1 to page 2 if you are navigating or from component one to component 2 if you are going ahead you want to look around whether to maintain the state or not we need to say the states let's say for example if you are logged in then it should show logout button if you are log dot it should show login page something like that a particular State change so based upon a condition you can look around so this state can be stateful or stateless that depends all right so these two are the major section which you are looking around meaning to say if you are talking about the HTML page yeah like say web page you have HTML plus CSS plus the JavaScript so HTML again as I said it's structure CSS is styling so whatever is going to be distribute is the view here but what needs to be displayed on the view is based upon the JavaScript in this you have two major things one you have the uh let's say variables which is going to be majorly focused on the property sections which is props and the other one Behavior which is the methods and methods is going to be from the perspective of the steps which is going to be involving an action all these things can be controlled by the state which is state or stateful or statelessness so that depends so in here those are different categories one is a variable the other one is a method to be very honest in programming world it's going to be variables and methods variables majorly from here methods from here all right so these are going to help you out in terms of implementing it so properties are going to be the one which is going to be rendered from the parent component to the child component let's say if you are going to have error name as Bob and footer name as Alex in the parent component and use the option let's say this dot props dot name in the child component whatever let's say options you give this dot props and the name here whichever name you give here it gets located so the content is like say footer footer content Alex will get displayed this is the header content so Bob will get displayed so this way you define it and when you are rendering the page you can call this and if you see here the instance and properties name usually the props are going to be helping you out to communicate between Community LSA component one to component 2 with respect to the implementation however these properties are are immutable meaning to say you cannot change it once you have it in the parent component the same thing will be there so you cannot change it whatever is declared under like say the parent class or parent component the same thing will be available in the child component and you cannot change it you just let's say inherit it just like the way you inherit your um let's say Family Properties the same thing is going to be inherited here so usually when we talk about the component section in let's say if in your HTML you have something called as attributes let's say you have a tag name and you have a key value pair here key is equal to Value this is the attribute key and attribute value this attribute part similar to this HTML code you're going to use the properties okay so sometimes you might see name here which is like this if I say if I'm going to take up this particular section you have this name here which is coming as email okay so what our name is coming here this is the attribute in HTML but you can connect this from the properties perspective also the same thing just like this what you see here Works similar to the HTML attributes only whatever you define here for example if you see you can see that email address or phone number to be displayed that's coming up from the placeholder here ok so what is getting displayed here is coming from this particular information the same thing is what you're going to use it in the props also similar to what you see as an attribute properties are also going to be the same thing like say just like the HTML attribute is going to be the same thing and it usually has top to bottom approach meaning so say you have a properties you get to this component from here the second component from here the third component it gets the flowing part it's not the reverse order it's always the top to bottom approach the data flows from parent component to the child component and it is one way there is no backward bottom to top operation is not possible only the unidirectional data flow top to bottom and it is immutable you cannot change it whatever you get it in the top level the same thing can be passed to the bottom level but you cannot change it and you can set the default props also sometimes you might want to set up a default values you can set it up also so that it can be refreshed everywhere the next section in here let's say you can see this is from the es5 perspective the coding perspective the current one is es6 if you see here you have this implementation sending props you can set the names and when somebody is going to call it here so if you see very closely it has header name as Bob again header as Max and footer name as Allen when you're calling it up Adder this dot prop you have this value footer you have the value so the place where you have defined this names as Bob Max and Allen will get displayed here according to the calls so you have this body and you have this render function and you have this child components which is going to be calling the classes and which is going to be calling this parent class implementation this dot props dot name which is going to be the header section in here and footer section this dot prop start name so when you define this as header and footer you can see header value Bob and Max will get the state footer value Allen will get displayed here when you are rendering the page so now let's talk about the state part in a state what happens is we are going to check out a particular State meaning to say let's say uh you talk about an icr is not going to change unless an external Factor comes into the picture so if you increase the temperature the solid state of this water which is in ice is not going to be converted to a liquid state which is water solid to liquid conversion with the increase of temperature and reverses solid but we are not talking about the reverse part we are talking about the parental combination unidirectional probe so here we are not talking about the reverse reaction we are going to talk about the One Direction let's say a page is logged in you as a user you log in so it's already logged in the state if you click on a button let's say logout button the state will now change from logged into logged out or let's say I talk about one particular section meaning to say I have a counter prism so if you click on this number of times you clicked will get increased to be variance I cannot show you the coding right away of doing it let me take up something directly from the system itself let's go with the react uh GS and go to the uh tutorial part and let's say we go with the section here uh so presume like this the moment you click on it the value comes up click here the value comes up see this so unless you click the operations will not change if I refresh this you can see nothing has happened so the page is available only thing is external Factor you click on it automatically click it changed all right something like this are let's say I'll talk about something like react.js tutorial I'm going to take up a simple example so that you can understand it um no not this one let's say we go with something like uh this is detect one getting started uh let's say react yes state coming up here I don't have it here uh sorry there is some place where I can get that no not here okay let's not talk about too much let's say in here only I have showed you the moment you click on it you can see an option coming up right so unless you click on it it will not change so in here states are going to be using this kind of implementation now in this code if you see there are a lot of things which is coming up okay you have a square which is going to have the let's say on click operation on properties click you're going to get this and each of this let's say this dot properties dot squares you have the square and I here on click I here and on the return perspective you have this rendered information Okay so render this information and when you are doing The Click operation you are going to perform some operations one by one you're going to get this and you're going to maintain the history also okay stateful implementation so what was happened previously you're going to do it so this way the code is written in such a way that it can do the changes okay so what happens is unlike properties it is not let's say immutable it is mutable meaning to say it's going to have some information okay so what was the parent section when you are having some operations done click or type you're going to get the operations updated the value is previously let's say if Ramesh is the name which was given the same thing is retained it is immutable in here it is mutable meaning to say if you see here it is getting muted the moment you click on it it gets mitted up the initial section is nothing after that it gets updated so it's a mutable section these sections are going to be changing or rendered based upon a behavior maybe let's say a click operation or maybe let's say mouse crawl operation something you're going to capture it and you're going to do it it is the actual score of the rate components and it must be usually kept simple don't complicate it if you see this code here as an example each of them are really simple you don't go ahead with too much of complication it is very simple okay the thumb rule in programming says that ah when you write a method try to keep this method with 8 to 10 lines as much as possible don't complicate it don't write everything in one method if possible try to redirect it in let's say method one method to method three and try to reuse them one by one that's the programming Concepts only if it is not possible to do the reusing god with writing it in one company more than 10 lines but as much as possible try to reduce it within 20 lines so that you don't complicate it all so the same thing is applicable here also make it very simple so when a component you are actually passing a property and so on this is the second component the second component Behavior changes at a state level when you click on it the third component may come into picture okay again the state part so states are going to be of two categories one you have like say um stateless and statefulness let's say if you talk about State full whatever happened in the first request it is maintained so this is going to be loaded in the ram or the memory and it's going to be retained so when the second request comes up the previous data also is loaded and we are going to check it out for example as a user I log in so the status is logged in it is available logged in status the second components whatever is going to be displayed right here is based upon the login section only okay so something like this you go to YouTube page the moment you are logged in let's say this is sign in you are logged in you click on any of this link for example I am going to choose this songs okay in this whatever you see here if you see the previous page and the current page the same state is maintained history is maintained it's not going to log off unless there is a state change so statefulness will actually keep up the previous values whereas statelessness the request when you comes up and you send the response back it is done the second page is not going to have the previous records and it is clean slate meaning to say every time it's going to be a fresh call you don't maintain a previous record meaning to say you are logged in your log dot doesn't matter whatever you send across the same thing will come into picture here so previous state of operations are not recorded and that's why usually speaking statefulness is called as the smart components and the statelessness are called as the dump component but on the other end please understand when you're going with statefulness you're actually increasing the memory so the performance also comes into the picture here so you should be always looking around how much data needs to be stored and how much should not majorly the cookies and all those things will be stored and from that cookies perspective you can take a call on what was the previous session okay so um the quickest part when I'm talking about what we do is let's say uh when we are talking about the banking transactions okay in the banking transactions uh let's say I'm going to use this uh let's say one of the laptop and I'm going to use one of the browser let's say Chrome browser and I make a request so when it goes to the bank it actually sees that it is a request has come up affresh you're going to come back here and you're going to store some data information as cookies so the next time when you are doing the call you can take up the check whether this cookies is coming into picture or not if the cookies is not there I'm not going to install the cookies again I'm going to reuse the same cookies if it is not there it's going to be there now let's say I'm going to install it so this kind of information I can make it from the statefulness okay so one is this the second one is you have the cookies and you have the session IDs so session ideas are going to be majorly for statefulness logged in log dot and so on you have a session ID from that you can make sure that the previous history is still written so if I'm making any such in the history in the browsers and let's say I'm going to search for react.js tutorials or maybe like say how to cook how to train Metro dog or how to learn let's say driving the bike how to I mean safety precautions taking while going for a long ride and so on all this history is going to be maintained in the statefulness and I can use it for the futuristic aspect so when some information is going to be displayed on my screen it's going to be based upon the previous history such as which I've done but on the statelessness this is not going to happen okay so it comes with a little bit responsibility where you have the memory also coming into picture so usually statelessness calculates the state of in the state of the component and contains no past information or current or future possible informations however statefulness will actually have the past information current information and futuristic information which can come into picture so this is the structure of stateful State section and when you talk about the state perspective you can have state full and child component as stateless you can maintain the history here and you can ignore the history the other way around it's not possible you cannot have statelessness under that you cannot have stateful that's not possible at all okay stateful and under that you can have a stateful or stateless session that depends but the other way around is not possible stateless to stateful is not possible so this is about the state's part and the flow of the components are going to be like this let's say as I said right initial setup I am not logged in I will set it as false when I come to the child section as I said initially in this section when I was in this page it was not logged in when I come to the next page it's still going to be showing us not logged in because the state is not changed the moment I click on this let's say I'm going to click on sign in page receive the click and you're going to set the properties as logged in the from now on when this operation has been completed in here it's going to be carry forward with that only so the next components the next Pages let's say if I'm going to click on any other links here resume I'm going to take up this so in here after click let's say logging in in this particular section I'll have the retain of this session which will be logged in only unless and until I click on logout it's not going to work so here you have these things let's say I have some information as multiple data here I'm a stateful and all those things and if you click on this button you'll be logged in if you're clicking on again it will be logged out or something as a demo part I'm going to show you here so this is the pages perspective so in here not logged in and click here to login the moment you click on this it says click out to logged in I mean logout and you will see so the state change from here to the state change here okay so these components get loaded up dynamically but this data is not meaning to say only the changes which happened on this page is Section 1 Section 2. rest of these sections are not even changed this is about how it's going to be rendered and implemented as of now I cannot show you the demo because of the time constraint but you can see that it happens so there are four components of a life cycle phases you have initial phase you have updating phase you have props change phase and you have unmounting page initial phase is the place where you are going to load the data to the Dom so you have different options like say get default props whatever is being default there initial state of the props let's say whether you are logged in or logged off initially we set it to log logged out and component will Mount meaning to say sometimes uh you might look around whether the component needs to be loaded or not loaded in here the initial phase will always go ahead with component will be mounted here and the next one is going to be rendering phase which is going to be the data which is going to be rendered as a view perspective and post that checking out whether the component has been mounted or not this is the initial phase of a the second one is updating Facebook now you have the page you are going to do some operation scrolling up or clicking on that so you have different options the method is should the component update there are chances sometimes you might want to update sometimes you don't want to update so in here if you want to go ahead with that for a particular section you can go out with should the component be updated based upon s or no you can update it the second one compulsory you are going to update component will update it if you do any changes it gets updated then rendering part and after that having update whether the component did update or not the third one is prop change meaning to say from one place to another place you are going to do the changes so in here similar to updating phase you have all those things should component update uh the component will update render and Company did update only external one is some parent component to the child component you're going to pass the property so components will receive the properties changing perspective logging in logged in the value let's say the name of the user is Ramesh the properties now name is Ramesh that Ramesh is going to be coming into picture here okay so that is component receiving phase or component changing phase okay the last one is unmounting press after you have done some operation you want to remove it off or thrash it off phrasium let's say there are some information which is going to be removed off after you log off let's say in your banking application when you log off your session ID should be removed off unnecessary cookies which is relevant to this session ID should be removed off or some page let's say um information based upon let's say welcome remissioned all those things which was there in the page those information which is there as an HTML perspective should be removed off because you don't want to keep the trace of it meaning to say all this information needs to be removed from the Dom structure that will be done from the component will be unwanted section by default it has to be compulsory done and that's the reason it will say will unmount anything which is there from the Dom inside the Dom that data needs to be removed you are going to do the unmounting phase and this is the important phase for the last section which is the log word section or something like that and this life four life cycles is explained here as I explained previously you are going to in the initial States setting up the props setting up the state and all those things one by one all whatever four phases we have right so B it is extended in the perspective here how each of them will get called how each of them will be used that's it we'll see you on the other side guys thank you so much everyone have a great day