Which is better — Functional vs Class Component?

As stated in the previous blogs, React JS is divided into small building blocks known as components, which work independently and return a particular HTML structure in the DOM tree. It is sub-divided into two types: Class component(Stateful) and Functional component(Stateless).

Apart from this broad difference, there is also another type of component, which is used as a common way to tune a React component for performance, known as Pure Component. This component only re-renders when its props change (instead of every time its parent re-renders). This can be done by extending React.PureComponent instead of React.Component, or by implementing the shouldComponentUpdate lifecycle method to compare nextProps with current props. If the props look the same, it skips the render, and saves time. Let’s start with understanding the basic difference between them. Render method Class component extends React.Component and hence must implement the render() method, which returns the DOM element, whereas Functional component can be thought of a simple function and doesn’t have any dependency on the render method and simply returns the HTML DOM structure. Constructor As the name suggests, Class components are also associated with the constructor method, where one can define the initial state associated with the component. Initial state can be thought of a default property on the component, that can be altered using the setState method. Functional components didn’t have any such privilege, until react 16.8. With the introduction of Hooks[Will be discussed in subsequent blogs], one can define/modify state in functional components as well. Lifecycle methods Class components have certain methods that denotes a series of events – Birth, Growth, Death, in the life of the component[Will be discussed in subsequent blogs]. These methods are responsible for various activities performed on the component. They are used to update the component state at various stages, based on some external API call, some updated value received from an external store, etc. Prior to React 16.8, there was no such concept in the functional components. But with the introduction of Hooks, some of the lifecycle functionalities were possible in functional components. Below are a few snippets of the difference. Detailed explanation would be given in subsequent blogs.

Initial state defined under constructor and a lifeycle method

UseEffect hook for making external API call

‘this’ keyword In the context of a class component only, we have a special keyword, this, which references a JavaScript element depending on the scope or context of its use. It is nothing but a normal reference object which is pointing to current execution location/place/scope in JavaScript. For example, if we write a function inside a class component and want that function to perform some activity about altering/updating the state of the class component, we need to bind the function to the class context. Failing which it might lead to error of undefined state. [Functionality of binding the ‘this’ keyword would be explained in the subsequent blogs] Which component to use ? The choice of component, whether class or functional solely depends on the project requirement. But there are a few parameters that we can consider while choosing our component. 1. Easy readablity: As functional components don’t use binding in terms of ‘this’ context, they are easy to read and execute. Moreover, they are isolated from any hidden state changes that may occur asynchronously. 2. Better performance: With Functional components, one can have better performance than class components as it doesn’t call any lifecycle method due to any underlying state change. 3. Easy to debug: As the functionality consists mostly of props in functional components, its easier to debug. If we know the props passed from the parent component, we need not keep eye on any other change. 4. Reusability: If we keep the functional component solely to a particular functionality, which works on the basis of the props passed, we can reuse it. Though above mentioned points are not enough to decide which component to choose, but it can help one analyze the pros and cons of each and decide which one suits the requirement for the project.