First of all, what is component? Basically, component is block of code or, you can say, JavaScript function which can be reusable throughout the website. There are two type of component which is class-based component and function-based component. In this research, I have presented the difference between two.
Class-Based Component
- This is also called as stateful components as it uses state to manage data and logic.
- This extends “Component” class from the “React” library.
- It always contains render() method inside the class to return HTML to user.
- It uses state to initialize data and change data, and re-render the component.
- Redux can be used to manage state
Function-Based Component
- This is stateless component because it is not using state to manage data but instead this receives data and return to HTML user.
- This component can be defined by “function” keyword or arrow functions.
- This is not having render() method.
- This returns JSX HTML by accepting “props” as argument and processing on it.
- Hooks are used for Lifecycle Methods in such components.
Overall, in my opinion, function-based components are more simpler than calss-based components to write and manage code and data.
Sources:
https://reactjs.org/docs/components-and-props.html
https://medium.com/wesionary-team/react-functional-components-vs-class-components-86a2d2821a22
https://www.twilio.com/blog/react-choose-functional-components
