Class Vs. Functional components — Quick Reference
When you are working with React, the two important concepts which come often to your mind are the functional component and the class-based component.
Now that we are talking about components, let me tell what the class & functional components are -
By using functional components — you can achieve better & faster performance and it’s also an easy way to test React components because it provides simple and shorter code.
Here’s an example:
function ShowName(props) {
return <h1>Hello, {props.name}</h1>;
}
This is just a function that accepts props and returns a React element. Isn’t it?
But nowadays we use the arrow function syntax. So the component looks something like this:
const ShowName = ({name}) => <div>Hello {name}!</div>
Now, let’s have a look at the class-based component for the very same code. Do observe how many lines of code we have to write.
class ShowName extends React.Component {
constructor(props) {
super(props);
this.state = stateObject;
//other initialization code
}
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
Both versions are equivalent and will give you the exact same output.
Check out my bestselling and highest rated ReactJS course on Udemy —
Mastering React With Interview Questions,eStore Project-2022
Now you’ll ask me — “Why should I use a functional component instead of a class component?”
Well to start off with, the main difference is the syntax. Because a class component requires you to extend from React.Component class and also create a render function that returns a React element — it requires more code as compared to functional components. Also, it needs the constructor() method in most of the cases for initializations.
Functional components are easier to read and test because they are plain JavaScript functions & you end up writing less code.
Nowadays more and more developers prefer functional programming which is a newer and better approach, especially with a language like JavaScript, functional component is the practical implementation of functional programming.
The React team also mentioned that there may be a performance boost for functional components in future React versions which is great news for the React community.
So it is always better to work with a functional component, rather than a class component.
Looking for remote/contract Web/UI/Full stack opportunities in the US? Connect with the front-end/full-stack development staffing experts of our industry today.
About me:
Founder and CEO of an IT company in India, I have more than 25 years experience of in dealing with people, processes, and codes. I started online training for my students when it was not in fashion and have trained more than 1000 students/working professionals personally which has helped them to secure awesome jobs or even start their own business.
I am also been an active corporate trainer for several years now and have been consulting with top Fortune 500/1000 companies to streamline their development projects efficiently. My goal is to share knowledge with a primary focus on advanced tools & techniques, projects, and standard programming practices to help my students understand the basics and fundamentals and make awesome technological implementations.
