ReactJS Web development

Class Component vs Functional Component: What's the Difference?

Introduction to Functional Components and Class Components

It typically takes developers hundreds of lines of code to develop a single-page application that uses the traditional DOM structure.

As a solution to this issue, a component-based approach gets used if the program requires some changes that are not easily updated. As part of this process, application code gets divided into logical groups known as components.

Functional components in React

While working in React, you will come across some functional components. These are just JavaScript functions. Writing JavaScript functions allows us to create functional components for React. As JavaScript functions, functional components in React look like this:

function Fun (props) {
return <h1> Is anybody living freely, young, and wild? - {props.name}</h1>;
}
const element = <Fun name="Me!" />;
ReactDOM.render(element, document.getElementById('home'));

write your code here: Coding Playground

Our example renders an element representing the Fun user-defined component. In our function component fun, we pass JSX parameter name=” Me” as a prop, returning a <h1>Is anybody living freely, young, and wild? – Me!</h1> element as the output.

Both types of components use props as inputs. The props help pass information from one component to another, and the process is crucial if you want to create a dynamic user interface.

One thing you should keep in mind, however: props are read-only. As a result, all React components should use the same inputs and return the same results for the same props. Properly behaved components get referred to as “pure,” and the classes and functions both fall under that rule.

Class components in React.js

It is the backbone of most modern web applications built in ReactJS. It consists of simple classes (which are composed of multiple functions that add functionality to an application).

Here's an example:

class Fun extends React.Component {
render() {
return <h1>Is anybody living freely, young, and wild? - {this.props.name}</h1>;
}
}

write your code here: Coding Playground

It is an ES6 class that extends the react library's component class. It uses the render() method to return HTML.

As well as working with props, class components can also work with the functional component. The syntax for passing props to components is similar to HTML attributes. To use props, we need to replace props.name in the render() body with this.props.name.

Functional Components vs Class Components

Functional Components	Class Components
Functional components are simple JavaScript functions that take props as arguments and return JSX.	A class component extends from React.Component and the render function return the React element.
It is known as a stateless component since it does not have any state	A class component can also be referred to as a stateful component
A functional component does not respond to a lifecycle event	Lifecycle events can be handled by class components
A constructor is not supported by functional components	Provide a constructor for storing state before passing props to the parent class
React provides useState()Hook for handling state functional components.	It's a bit different for class components. The this keyword is required, along with the setState() function and a constructor.
Comparatively, functional components perform better than class components	A class component is more complex: it is an instance of React.Component with a constructor.

Conclusion

Although It is best to use function components most of the time and React is also allowing the use of state with function components for React version 16.8 and later with the useState hook, as Meta (Facebook App) also recommends. However, in older versions of the react framework, we can use class components that rely on state information