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/
Top comments (0)