Functional vs Class Component in React

This article is for beginners who need a little overview of components. Before going into any detail let us first have a brief introduction to React components from the documentation:

What is a component in React:

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.

React is all about components.

Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.

There are two types of components in React — functional and class-based. In this article, we’ll have a look at both of these.

Functional Component:

The simplest way to define a component in React is to write a JavaScript function. A functional component is just a plain JavaScript function that accepts props as an argument and returns a React element.

function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}

Class Component:

A class-based component is just a JavaScript class. It requires to extend from React. Component and create a render function that returns a React element.

class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}

We can also create a Class Component with React.createClass().

Differences:

1-Functional Components mainly focus on the UI of the application, not on the behavior.

2-Functional components take props as arguments.

3-Functional Components can’t have a state and they can’t make use of lifecycle methods.

4- In the functional component, we access props with props.

5-Functional Component can’t have render method.

6-Class components have both state and props but they can also exist without the state.

7- In the class component, we use this keyword to access the props and

functions that we declare inside the class components.

8-Class components can make use of life cycle methods.

Functional vs Class Component

Further readings:

Stateful vs. Stateless Functional Components in React

Functional vs class components