React class components and functional components

React class components are extended from the ‘Component’ class that is provided by ‘react’. These are complete classes that contain lifecycle events and states. The constructor ‘super’ is used to give values to states. The this.props gives props sent to the component. These do not need external libraries or hooks when it comes to storing states for the component. Each class component must contain a render() method, that is called whenever the state values change. The render() function should be pure, i.e., it should not change the state values. It can return a React fragment, array of elements, a JSX element, a string and numbers, boolean or null values.

Functional components are just JavaScript functions that return a JSX component or a display component. This component is displayed on the DOM. These components are inherently stateless and require hooks or external libraries to store state values. The same with lifecycle events, they require hooks to listen to or generate lifecycle events. They are much simpler and are useful when all you need is a simple display. The props object is sent as an argument to the function. This object contains all props sent to the component.

If the component needs to perform much more complex computations on data or retain a lot of state, go for class components. The class components are used for high utility apps and pages. On the other hand, the functional components are much more light-weight and easy-to-read when compared to classes.

However, with the introduction of Hooks, the functional components are at par with the class components. The user can feel free to use functional components for almost all of the scenarios without the fear of missing out on the functionalities of the class components!