To understand class and functional components, we should first understand how these React components evolved. React is an open-source front-end JS library for building interactive user interfaces. Some of the famous features are the virtual DOM, one-way data binding, JSX, reusable components, stable code, fast rendering of UI elements, and performance optimization.
Along with these advantages, React also offers two types of components that the developers could use to create UI elements. It can be assumed that both provide the same opportunities for writing UI elements. But it isn't true. The real reason was that class components were the only option to develop complex code. The reason was with class components that you get additional features like state, while functional components didn’t have such an option. However, the situation changed with React v16.8 that was released in 2019. It took the development of the functional components to a new level. React offered hooks for functional components. The introduction of hooks made it possible to write complex code using only functions.
Props are inputs for both types of components. One of the main tasks of props is to pass information from one component to another. However, props are read-only. That means all React components shouldn’t change their props value and must return the same result. Components that respect their props are called “pure”. That rule works both for class and function components.
Another way of declaring functional components is through using an arrow function. Arrow functions have some advantages:
• It looks compact. Functions are easier to read and write.
• Arrow function automatically bind this to the surrounding code’s context.
Props work well with both class and functional components. Additional benefits of class components are that they have a state and lifecycle. This is the reason they are called “stateful” components.
The state of a component is an object that holds some information and controls the behavior of the component. The difference between props and state is that props don’t change over time, but the state holds the data that can be changed over time and changes the component rendering.
Difference between Functional and Class Components
• State and lifecycle
However, things changed with the introduction of Hooks. To replace setState (in-class components) React offers useState Hook for functional components.
To work with components lifecycle, classes have methods like componentDidMount, componentWillUnmount, componentWillUpdate, componentDidUpdate whereas functional components have a hook called useEffect.
-The way props are passes
Working with functional components, we pass the props as an argument of the function using is like “props.name”.
With class components we need to add this. to refer to props.
• Handling State
To handle state functional components in React have a useState()Hook. We assign the initial count equal to 0 and set the method setCount() that increments by one every time we click a button. The type of argument can be a number, string, object, or null.
Class components use setState() function which requires a constructor and this keyword to refer to the state.
• Hoisting works only for functional components
• Running tests
There are two most popular utilities for testing - Enzyme and Jest. The enzyme is a JS testing utility for React that allows testing React renders. Jest is a JS testing framework for creating, running, and structuring the tests.
These two utilities work well with both types of components. There are some specific things to keep in mind in running tests for functional components, like, the state hooks are internal to the component and can’t be tested by calling them. Same with methods and functions.
• Performance difference
People think that functional components have better performance than class components. React functional components are simple Objects with 2 properties: type (string) and props (object). To render such a component React needs to call the function and pass down the props.
Class components are instances of React.Component with the constructor in it and complex flows for manipulating state and lifecycle.
Advantage of a functional component over class component
• Functional component is easier to read and test as they are just plain JS functions
• You write less code
• The React team stated that there may be a performance boost for a functional component in future releases.
In a Nutshell
• Earlier Class components were the only option to add states to components and manipulate the lifecycle. However, since the introduction of React Hooks, now we can add the same functionality to function components.
• The major difference is the syntax. It is related to the way we declare components, pass props, handling states, manage the lifecycle.
• Functional components capture the props and state by default.
• Functional components require less code to write. It's subjective and depends on the developer how he wants to write the code.
• There are two popular tools to test functional and class components: Enzyme and Jest.
• There is not much difference in render time between class and functional components.