This content originally appeared on DEV Community and was authored by Victor-Aremu
A functional component is just a plain JavaScript function that accepts props as an argument and returns a React element. There is no render method used in functional components.
On the other hand, a class component requires you to extend from React and create a render function which returns a React element. It must have the “render ()“ method returning HTML. Class components are known as Stateful components because they implement logic and state.
Now that you have the basic understanding of how these two operate, I will tell you which one I think is the best and why.
Functional Components are better than Class Components. The era of Class Components has long ended 😌😌, the present and future points to Functional Components 😊😊.
As a front-end developer, I use React a lot and I’ve used both Class Components and Functional Components. Personally, I have found that functional components are just better😌. They are so fun to use and very easy to read as compared to Class Components. If you know me, you will realize that I like simple and straight to the point codes, that is why I appreciate functional components so much.
By using only functional components in your project, you will significantly reduce the need to refactor the class component into a functional component when it grows. You don't have to worry about this in the functional component as the class confuses both humans and machines, especially the this keyword. You don't need unnecessary method bindings, as you always do with class components. Sharing stateful logic between components can be tedious with a class-based approach.
At the end of this blog post, I will share some of my codes with you, where I have used both class component and functional components in manipulating the state of a component. React introduced hooks like the useState in functional components, and with this, there is no need to write Class Based Components. Hooks can be easily used in functional components.
example: const [name, SetName] = React.useState(‘‘).
In these codes you will also see another distinct difference between these two types. For functional components, it’s not required to use constructors, whereas for class components, constructors must be used.
This component is managing state in the constructor and to access the state, you need to use the this keyword. This Component has 19 lines of code.
This component is managing state in a hook called useState and to access the state, you just need to call it by the name to use it. This Component has 10 lines of code.
Conclusion
To wrap up, based on the above example, functional based components are shorter and simpler, which makes it easier to develop, understand, and test. Class based components can be confusing with so many uses of this.
It should also be noted that the React team is supporting more React hooks for functional components that replace or even improve upon class components.
I prefer using functional components over class components for those reasons listed above. I hope this post helped you a lot. To learn more, check out the official documentation!
This content originally appeared on DEV Community and was authored by Victor-Aremu
Victor-Aremu | Sciencx (2022-02-18T14:28:33+00:00) Class components are a waste of syntax 🤣🤣. Retrieved from https://www.scien.cx/2022/02/18/class-components-are-a-waste-of-syntax-%f0%9f%a4%a3%f0%9f%a4%a3/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.