Jozi.JS 2018, 19 Feb 2018

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: A deep dive in ReactJS component lifecycle - Mahesh Haldar

Description

This talk will go through the use cases and best practices to write React lifecycle methods, which will help in developing the highest quality React apps.

Jozi.JS exists to try and foster a community in Johannesburg, a meetup group dedicated to all things JavaScript!

The group meets on the third Thursday of the month from 18:30 to about 20:30. There are typically two speakers, on different topics: a ‘lightning talk’ of 15 minutes and a full presentation of 45 minutes.

https://www.meetup.com/jozi-js/

A

And I was very excited to be here and I I belong from India. My name is Mahesh, I am a full-stack developer. So first of all, everyone is comfortable here, nice, cool and even before proposing this talk, I talked with the mic that how's the community in react like weather, should I pick up, beginning or little advance. Then I got to know that majorly a lot of people do react. Is it so react react? Anyone who hates react, yeah, yeah, yeah back to okay cool, then we'll at the end of the discussion.

A

Will I'm majorly talking about one react component lifecycle. So let's say how we go about that feel free to interrupt me. If you have any questions about about any any slide which okay, hello, it's not working somewhere, yeah mine is Mahesh. I am youtuber IRA narrate stories online in in Hindi. So probably you will not understand I'm a blogger I write in medium calm opens was contributor, I have created few to tools and react. Majorly and the speaker have been speaking in India in various colleges.

A

Teaching about web development react HTML, video, editing in Photoshop design, and here in there cool talking about react.js. This is the official one-liner introduction of react.js, which says: react.js is a javascript library for building user interfaces. So in react we build user that everyone knows, but why user interface? That's why I have made it more bold user interface is generally one area where user interacts with that right, so react is that not more than that not less than that.

A

So talking about user interfaces and they react andrey and whenever talking about react, everyone would burst their minds with components, components, components right, there is react, so most of you would be familiar of what I am talking about. So if this is my Twitter homepage, then probably I can divide the whole page in few modules, few components which has its own responsibility- that if that we call pure function so suppose, if this is my Twitter homepage there, probably this can be one component which handles only about the recent trend.

A

That can be my profile info and that can be one tweet, and every of these component has its own control in its own way. To summarize more, if we can consider this as one television screen, one television screen, another television screen and every television screen has its own compact discs or DVD player and its own control its own remote.

A

Are you getting me and- and this is the process, for example, if you, if there was one close button, this display or television will go away and if there is any update or number of to it has increased. This number will get updated similar way. The DVD player does to the television and every corner. For example, this television can can be subdivided into two parts, one and another as the timeline picture, and this television can be divided again into three parts as to it number following number and follow number, and why this is helpful.

A

Just like reusable functions, we write modular small functions right in the same way for this particular television or component. We could have written only one component and lubed it to three times and pass by bypassing one title and number title number title and same goes for the post visibility. There is only one component, one function, call it pure function, and that is getting repeated again and again, simple right, and that is only react and react. Is that simple cool?

A

Because here we are a react itself is a big big library and it has a lot of fundamentals, but it still today we are majorly talking about lifecycle of a component, so everything has a component. Everything has life cycle. Consider yourself, consider trees, consider a react component or a button in in any of the HTML document. Everything takes birth, it updates, during its lifespan and at one point of time it dies whenever you close the tab or when you die or or when de or when the react component disappears right.

A

It's that simple, it's user interface, its users. That's why it has life cycle like we do have good, so react component generally or any other thing you and me.

A

Everyone has full cycles, initialization mounting updating, unmounting I'm, using mounting, because this is officially been used by react, but I'll try to relate or make you understand what exactly mounting is, for example, if we consider how you took birth, your parents planned about you, that's no, not at all so who are the unplanned babies here and the first variants of probably I think I'm, also unplanned the second and third and the conservative are the plan ones right. So initialization is your part when your parents were planning about you like you're, getting my point right.

A

You were getting initialized and one fine day.

A

Yesterday was Valentine's Day, probably few of the more child's got mounted.

A

So this is the mounting mounting phase of your life. Yes, yours, everyone's and then updating everyone. You are getting updated by reactive company lifecycle, knowledge. Now, so you are, we are getting updated. That is updating and this this can be for ever can be for 10 years Kelvin for 20 years. Any point of time. That depends whenever God wants you not to be updated anymore, so that that size life cycle goes on goes on, there's only one time. For sure of that we understand and one mounting one fine day.

A

You are no more needed in this world. There is unmounted unmounting for just to compare it with the user interfaces. Because react creates user interfaces. You can initialize, you can mount it on the browser. If talking about the react.js mounting means putting something on to the browser like because the browser is the playground area and from there only user can interact or if it is react, then browser if it is react native, then probably mobile, app screen or wherever the client is running upon. Okay, that's very easy! So this is the big picture.

A

What exactly we are talking about. Initialization has something some set up: an set of a props. Instead, instead, we will talk about props and state mounting when the component is about to get mount and then render happens. Everyone knows the render right render rendering built up more ambition, because any react component depends on two things. One is prop prop is equivalent to parameter, and another is a state. Every component has its own state like. For me, any girl has its own mind of state which changes depending on a lot of things.

A

So there is a state of the mind kind of thing and process parameter. Where parameter is something like that, if you give gifts to someone, then someone gets happy, so that is the parameter, but it status the effect of the gift, probably just to summarize it and which has two different flows. What happens we'll talk in detail about this, but about props about states and unmounting happens good.

A

Why does it matter? Why should we know about life? Second methods, any guesses? Why?

A

Yes? Yes, please.

A

Things happen, and we need to know when what more, why? Why should we talk or why should we invest our time and lifecycle understanding life segments or why you, you have come from all your years? Might please write totally right how how life cycle is related to performance? Consider you are creating you. You are the developer of YouTube app you as a user. You are playing one video it buffers. There is a stream of connection, and every time the network is getting used, server is responding with the video buffer, for example.

A

Meanwhile, watching the video you switch to whatsapp or some other application, then being a better developer, you should handle that that whenever the user is leaving the app stop buffering so that you can better use the memory better use the battery better use the network right.

A

So, if you know life cycles is all about the preparation, the quality of that, for example, if you know that I am about to die, then probably you will fulfill all. You last moment wishes right if you know that, for example, your parents venue, when they got to know that you are mounted, then probably they will prepare about you right and suppose there was no planning at all. That would have been more worst than today. You are okay, so that that is why it matters. It matters a lot.

A

We should know where what happens so that accordingly, we can fit because our programming language, our application, is dumb. It's dumb right. We as developers give some mind to that that, in this condition you have to perform like that. In that condition, you have to react like that right. So that is what it is important cool I'm talking about, render a render method is the main method of any component which returns what to mount on the browser. Exactly everyone knows.

A

So probably this is one of the example which I have when first time I saw the equivalent of render that this is a JSON object, kind of thing, I, just like it, so so I thought that I'll share with you guys as well. So every render method is the main method kind of thing of one component, which returns some. This can be produced dynamically. Why a loop! This can be dynamic number.

A

This can be dependent on props or something like that that that's another detail or that can be discussed totally on react, but which summarize this is the equivalent of render that every every render will be having a type its props, a children, and this tree can go like a arrow shape, the number of children it has as to simpler, simplify that okay.

A

Talking about that example, which we were talking that every Twitter page or any page can be divided into multiple television, so, for example, consider this television so when this has to be loaded on the browser that has to be initialized, prepared that compact desk right and then you will mount on it, then once you mount, it will display it and it will keep on updating just like any common DVD player or anything.

A

It does so consider this as the example so and then, if you click on any cross button, this display- and this compact, this player will go away. So, just as simple as that, okay, an initialization because we said initialization when the component is about to mount before that you have to initialize and- and we said that any component depends on props and state, so probably like default parameters. We know on the functions right, so this is equivalent to we do the default prop.

A

If the prop was not passed, then what should we consider and what is the initial state and, for example, state? Also? There has to be some initial point whether it can be null or it can be, with some considering values and to make sure that we are understanding the concept which we are talking today. I'll try to make sure that we are creating one application. That is maybe music player, does the sample code of that.

A

So, for example, if I want to load my music player first time, it should be loaded with some configuration right, for example, volume. So it should be 70 a percent estate. It should be poor or played or stopped, and same way. Your component can be dependent on props, which is being passed from the parameter from parents parameter or it can be. It can have its own state. To summarize how the default props are so the default prop can be, theme can be dug and for state volume can be 70, stitches can be paused.

A

So if you do not pass when rendering this particular music player onto your anywhere, you can pass nothing. It will load with its default configuration like default parameter, and if you pass some parameter like theme equal to light, it will replace with this one. It will not pick the default parameter, so that is default, props and initial state. Any questions on this I think fairly simple right. You guys are genius great, no questions mounting. Everyone knows mounting right, so this is component well mount. That mounting is about to happen, as the name suggests.

A

This is the method component will mount at this point of time. It says that I'm just about to mount, do you want to do something.

A

Do you want you? Is there any action you want to do before mounting that happens here?

A

Okay and after the component has been mounted yes component dead mount. Are you getting? My point? Am I able to explain nice good okay, so because now there is a huge debate going on the internet, that weather should be merged component will mount and constructor. That makes sense right because constructor, whenever you are creating object of that particular component, I'm talking specifically in es6, so there is a constructor constructor will be always called first before mounting. Obviously and component will mount also will get called before mounting.

A

So what's the point having two different constructor so still, I have not got the right answer, but we can debate on that component. Dead, mount complete dead, mount says that yes, component has been mounted on the browser. Obviously, so this can be important because, for example, when you are using some third-party libraries apart from react.js, maybe consider hi, charts or d3, everyone is familiar with that right, super or any graphing, graphing library or or maybe jQuery. You want to use some parts of jQuery in react.js.

A

You can do that, though, that is not recommended, but it's still so for those kind of libraries you want divs and all those tags in the HTML browser, so that then you can catch it. So that happens here component dead mount because we in react. We talk a lot, a lot about virtual Dom and all those stuff. If your HTML structure is in virtually, then you cannot apply those libraries right simple as that. So this is one of the example component after component has been mounted component dead mount.

A

We can apply high, charts library I'm, not going too much into the code detail. Then probably we will have to extend into few ass or something like workshop so which I don't want, or probably Mike did not give me that slot. That's unfair Mike cool talking about updation, because that is all about this- is all about mounting valmont dead mount. That is it right now talking about a Bayesian updating and any component depends on two things: props and states. So when props is passed you you will have probable receive that before receiving the prop properties.

A

Why this is important, we'll talk again, should component update now should component update, because this is present only this one in the initialization or in the mounting phase component will be mounting for sure. That is first time, but in this case, what, while updating while updating is the second time render is getting cold? Just pause may feel if I'm getting two to two speedy way in updating it's like already. There is a Dom of the same copy.

A

I am going to update that now, there's will be a question should should I come, should I update the component, should I rerender? Why maybe yeah? Maybe your your render takes a very heavier? Probably, and maybe your render or your component depend change, can be dependent on on any one change right. So there is, there is a open API for this open method. Is that that you can control that one that, whether you want to update the component or not the as this is the question should component update answer would be yes or no?

A

Hence it will it. It expects to return true or false, and component will receive props or comprehend. Will update or component will mount. It is not a question it's a statement, so there will be many functions.

A

There will be only actions so should component update, returns, true or false, which you can obviously control that if the current props value is greater than previous props value, then update otherwise, I don't want the operation right, for example, if you are creating some some confidence building application, where you won't only want to show to the user that your you are improving everyday beat fake or be bit something like that, then probably you will write the logic that, if the today's ask- or what is less than yesterday's is good, then do not update something like that.

A

Okay component will update its equivalent to component, will mount that before updating or before, showing, because showing in the browser happens here so before showing I want to do this. Why this is again important? It's again, some preparation you want to do before rendering then component dead update is again like component has updated. Now, do you want to do now? This is equivalent to component dead mount.

A

How, because in component did mount we were using the this new set of Dom. You can apply third-party library now, if those value again changes or the the structure again cheese's on the on the browser, then, probably again, you will have to refresh or reapply those libraries try to get it. Try to sink in it. It is equivalent to component will mount.

A

Are you with me nice, then again, other set of updation happens in deserts in steady-state kind of thing, but you will see. Only difference is that in this section there is no component will receive probes. Obviously we understand that right and rest, this is equivalent. This is equivalent. This is equivalent to that component data update is equivalent to that, because sometimes our component dependent depends on the state. It has major like, for example, if you are creating counter plus and minus button, and there is one counter which keep tracks.

A

So if you want to show increment the number on the browser every time we use a process plus, then then that shows that the user has to the UI has to refresh every time the count increases, and that happens using the dead state. The steady state is again a little magic kind of thing which rearend us every time whenever this is the state is changed, so that is the fundamental of react.js.

A

Should compare if it if I talk about example, so in short component you get the next prop and the next state, and obviously still the component has not refreshed. So it still. You have the access to this, the current prop and the current state. So you can compare statuses and then return, for example, should I update if the status has not changed, then do not update.

A

Do not do the heavy work right as simple as that, and then component will update it securely to component will mount where you can prepare like, for example, we did some initialization right before rendering or before mounting do some calculation, maybe, for example, I want to show some number on addition of two props. This is the preparation right, so this will happen on component Vallabh date that before going to the render part- or you render on some number, you render some particular number on the dev. You prepare yourself better comprehend it update.

A

If you want to refresh your libraries or some third-party dependency, why props is component will receive props because now again, component will receive prop is very important. Sometimes what we do? We assign some prop props to the state, so our state depends on the prop, so that kind of way you have to update the state as well.

A

So in that case, if you are receiving new props, then you have to also update the status or the state right so that this is why it is required that whenever I am receiving a new prop I want to do some refreshment, some processing or some cleaning. This is a very simple example. In real time we have. We have more complicated examples, more complicated problems. Now we reach to component before every go to comprehend villain mount. Is there any question on updating? Should I repeat anything? Yes, please. Yes,.

A

Yes, it's equivalent to any other constructor, like you coded in Java, right.

A

Component will mount.

A

Yeah, so it's just like duplication of the constructor any other question. I can repeat the slides for the objection, because updation has got various state, various methods to different kind of updation. So it's better. We clear all the doubts now like I do not want anyone to take some back edges of doubts to the home, and then you will be coming to India. Yes, tell me any questions. It's fairly simple, initialization mounting updation happens. Why two ways probs the state because component depends on these two parameters.

A

State and prop prop has component will receive prop component villages should component update. True if it returns. True then rest continues. If it doesn't return, then it stops there. It does not render again same happens with States any questions. Guys.

A

Are you really genius nice cool? We talked about this. We talked about this.

A

Unmounting unmounting: it's like debt right. Why do we need no need to know or need to write some logic when you're unmounting, obviously when you're logging out or if there is some timer or if there is some subscription to some api or some did a stream? So you need to clear that, because now the companies are not needed. That connection is not needed and if you're logging out that, if your computer is log out, then on logout on component will unmount. You have to clear all the session. All the clearance immediately happens.

A

It's like all whole life, whatever bad things you have done before death, you have to clean it up right by confessions and whatnot, and will there be another method called component dead-end mount? Should there be.

A

Mmhmm yeah, it doesn't exist, then, who will tell, for example, I'm telling yes, I took I, got mounted I got birth, I'm, updating, I'm about to die and after dying, yes, I'm died. That is not happening. That's why we don't have any further methods, like component did unmount, who will tell if the component has died, because all these methods are inside one component, its own parameter its own attributes right.

A

So if the component has died, component will not come in goes to version that yes, I, have died right, nice, any questions cool, so just to summarize again, I think I want everyone should have the impression of this diagram on their mind, so that because it's really fairly important to understand for exam I'll share.

A

Last year last year, last year, I started on react and I was on for what almost one year of the project after coding and react in six to seven months, then I got to know a lot or in detail about the component lifecycle. Then I looked back to my code and I was hitting myself. I was reading myself, but why so? It's fairly important. We understand why we are doing how we are doing and what else we can do, how we can extend our our method, how we can make more performant as Mike said right.

A

So here we are. That was me Mahesh, so I write on medium. So this this is this whole talk was also on one of my medium blog, which has got good claps and good views on medium.com. So you can follow me on medium I, write blogs on API eyes on react and next I'm writing on graph QL authorization authentication. You can follow me. Obviously I'm increasing my follow accounts.

A

You can follow me on Twitter so and there is a small feedback form only two or three questions. Please I would request you. If you can log in there not log in, go there and submit some feedback for me, so that I can see how how well I performed or how I should do.