Table of Contents
At the beginning
What is Functional Components?
What is Class Components?
Benefit of using Functional Components
Conclusion
At the beginning
According to React official document, using functional components is highly recommended rather than class components right now. React 16.8 introduced “React Hooks” for Functional Components and brought which were previously reserved for Class Components to Functional Components.
Functional Components
export default function FunctionalComponent() {
return <div>Hello World!</div>
}
Class Components
export default class ClassComponent extends Component {
render() {
return <div>Hello World!</div>
}
}
What is Functional Components?
Functional Components are JavaScript functions that take in props as an argument and return JSX（user interfaces）. They are easier to write and understand, especially for beginners.
In React 16.8, hooks allow functional components to use state and other React features without writing a class.
Here is an example of counter component using Functional Components.
Counter Component using Functional Components
function Counter() {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
</div>
);
}
What is Class Components?
In comparison to functional components, Class Components are more complex. Class Components have been the traditional way of creating components, which are defined by using class of JavaScript. In React, They return JSX（user interfaces） by render(). And also, use state and lifecycle instead of React Hooks in Functional Components.
Here is an example of counter component using Class Components.
Counter Component using Class Components
constructor(props) {
super(props);
this.state = { count: 0 };
}
increment = () => {
this.setState({ count: this.state.count + 1 });
}
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.increment}>Increment</button>
</div>
);
}
}
Benefit of using Functional Components
There are 4 benefits of Functional Components.
Simple and Readable
Improving the performance
Reusable components
React Hooks
Simple and Readable
Functional components are fundamentally simpler and more readable. This simplicity makes it easier for developers to understand the code, leading to faster development and easier maintenance.
Improving the performance
Functional components can lead to performance improvements in our applications by avoiding the overhead associated with class components such as creating instances.
Reusable components
Function components promote reusability. They are easier to extract into smaller, reusable components.
This reusability is essential for building scalable applications.
React Hooks
React Hooks, introduced in React 16.8, have revolutionized the way developers handle state management in function components. With hooks, you can manage component state and lifecycle events without the need for class-based components.
Conclusion
Now, Most of web applications are created by using Functional Components.
I would say we don’t need to learn Class Components too much. Especially for beginners, there are lots of what we should learn in Functional Components including other frameworks based on this concept. So, It’s better focus on learning and using Functional Components.
