DEV Community: akinkarayun

Lifecycle explained based on Class or Function type component in React.

akinkarayun — Sat, 30 Apr 2022 14:08:52 +0000

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/

What is the difference between Functional and Class Based Component and How to convert one another?

akinkarayun — Thu, 28 Apr 2022 12:17:22 +0000

Which is better, Functional or Class Component? or Which one the use? these questions are making the development complicated and sometimes make you regret when you start coding with one and realize that, you need another one. I certainly do not have the answer to those questions and usually, when it's time to decide, it all comes to which one you like or you used to code with.

Today, we will go and take these two and compare them detailly, Let's start then.

What is functional based component ?
A functional component is a simple function that returns something, that is all a functional component is, and it's definitely easy to write since it has simple logic which is an input and output, our input is props and output will be whatever we return from this function, straightforward and simple.
What is class based component?
A class component is a simple classes that made up of multiple functions that add functionality to the application, you have to extend a React component when you write these component and it's much more work to write these component.
What is the differences between these two component?
1-)A class component requires you to extend from React Component while functional component does not require that.

2-)A class component requires to create a render function to return React element, while functional component accepts props as an argument and returns a React element.

3-) previously only class based components could have state in component, but this is no longer the case since React hooks arrived to rescue functional components, the main difference between these two is how they handle state, state is one of the fundamental element, and it's important to choose which component you will use since it's different handled for two case.

Down below, on the left we see a functional component that has three states and is initialized with the useState hook, each individual variable has its own set function, which means each method has its own individual value, and these methods only affect their own value that they have. Consuming these variables is easy, just place the name of the variables wherever you want to use them in your code, and you all set. On the right we see a class-based component, in a class-based component, we have a constructer that takes props as an argument, in this.state we essentially set an object in it, we don't have any set methods here since we don't use hooks here, we only have variables that initialized and set as key values inside. When it comes to consuming these variables, it's an again different story with the class-based component, you have to use 'this' as a pointer to that variable, instead of the variables name itself, you have to write 'this.variableName', it's a bit more wording that we have to add as an extra.

Just a quick tip, if you don't want to use this whenever you use variables in your code, you can destructure your variable like down below.

4-) props are simple property that passed in as an argument, props in functional component is simple and straithforward, you just get the props in functional component and use it as props.variableName.

On the other hand, it's a bit tricky to use props in class based components, in previous section we saw constructer, and with this constructer we parse props, and one more thing here is whenever we have super call, which basically do is to pass props up to Parent constructer and the parent basically component that we extend the class from, so essentially passing props up to the tree. to consume these props, we just need to write this.props.variableName

Just a quick note, this in class based component simply pointing towards the instance of this component.
Just a quick tip, if you don't want to use this, just consume it like down below.

if you have any questions, just comment and will get back to you as soon as possible to answer your questions. and if my explanation helps you to understand the concept, give me a follow or clap, thank you in advance.

My Linked In Link Down Below
https://www.linkedin.com/in/akin-karayun-ab3239bb/