It's complicated to learn the lifecycle and logic behind it when you first start your journey with react, but it's a must for any React developer to create projects with React. Learning the reasoning behind the lifecycle will be a bit tricky but you will have everything to start here.
First thing first, assuming that you already know the difference between class and functional-based component in React, the lifecycle will be differently handled in this different component, so let's start with the class-based component and how this component handles lifecycle.
Lifecycle in Class based components.
componentDidMount
componentDidMount will resemble when the component mount which it implies from its name, so let's put it that way, you have a screen, whenever this screen on focus, whatever you have inside this screen, this can be a child, state, etc… this method call and mount this on the screen, down below we have an example that we have down below, we do a console.log(), another example of how to use this method, if you request something from the database, you can do that at that step.
componentDidUpdate
Whenever the component update, we need to run componentDidUpdate, this will only run whenever you have an update on props, state, etc...
componentWillUnmount
we can put the componentWillUnmount as an exit for component, whenever you rerender a component, we must call componentWillUnmount, whenever the user interacts on the screen, let's say the user changes the color of the component, so what react does, is to unmount the component and render it back to screen, so as I say at the beginning this is an exit for any component that rerender on the screen.
summary: to summarize, first we need to mount the component to the page, which we do with componentDidMount, and that way we see the component on the screen, and then this component receives some interactional changes that the user does, which will cause the component to unmount which will be handled with componentWillUnmount, and remount it again with componentDidUpdate so that's how we get the interactivity and dynamic behavior with react.
Just a quick note, we have more lifecycle method that is used in the class component, but the three above are the most important ones and you will use it a lot.
Lifecycle in Function based components.
UseEffect Hook
if you read my last article where I explained the difference between class and function-based components, you will already know that it's easier to use a functional component in your code, I mean that is my opinion :) I guess it's the same with the lifecycle since you only need useEffect hook. Down below you will find the example of useEffect hook inside the functional-based component, this is the plain implementation of useEffect hook, and on every render, we will have this useeffect to run.
Just a quick note, the way we implement useEffect down below, might be not needed since it will time whenever we rerender the component and not in the example down below, but if you have a complicated logic, you might not need it like down below and on the other hand, since it will run every time we re-render, it will affect the performance of the app, so be careful when you use it like that.
Next, we will discuss the picture down below, it's the same thing as above but there is only one difference, which is the bracket that we add, and this bracket make a slight difference, if you don't need the run useEffect whenever you re-render, so you have to add that bracket which will tell useEffect to run only at first render. this bracket is named as dependency array, and if you don't have anything in that array, that tells React only run this when the component mounts, and if there are subsequent re-renders don't run this code, Only when the component mounts.
What if we add some variables inside the dependency array, so now the things will be slightly different, if you check the example down below, you will realize we have a variable as a name, and this code will run on the first render and whenever we have changes on that variable. if you set the name as 'John' and you change it and set it to 'Jack' this code will render again. we can include props, and pieces of state, basically you can include anything that we want to trigger.
Additional note, this code will be equivalent to componentDidUpdate that we have in Class-based components.
quick note, if you forget to add the variable in the dependency bracket, and you have that dependency inside the useEffect hook, React will warn you about that and will ask you to add it in the terminal.
The final lifecycle method that we will discuss and this one will be equivalent to componentWillUnmount. down below you see an image that has a return in it, and if you see a return function inside useEffect hook, that means we do a cleanup, what clean up means, it means that before you re-render the component, it needs to be unmounted to be re-rendered with the updated version. as an example, if you are making a connection to a database, and whenever you make the connection, you should first need to make a clean-up then a connection, you have to disconnect and clean up after the connection again.
Just a quick note, you have to be careful when you make a connection and disconnect after back connect again because if you make that connection at the first mount and don't do it again, it will increase the performance of your React app, it will depend on what you need but just a take caution which UseEffect to implement.
We will wrap up here, lifecycle and how it's handled based on component type is a complicated topic but when you understand it clearly, it will all make sense. Hope my article will help you to grasp the idea behind the lifecycle methods, if so just give me a follow or share the article with your fellow friends that want to learn about lifecycle.
My Linked In Link Down Below
https://www.linkedin.com/in/akin-karayun-ab3239bb/
Top comments (0)