React functional stateless component, PureComponent, Component; what are the differences and when should we use what?

React is a popular JavaScript library used for building user interfaces. When working with React, you may come across different types of components such as functional stateless components, PureComponent, and Component. In this article, we will explore the differences between these components and when to use each of them.

Functional Stateless Components

Functional stateless components, also known as stateless functional components, are the simplest type of components in React. They are defined as pure JavaScript functions that accept props as an argument and return JSX to describe the component’s UI.

Functional stateless components are commonly used for presentational purposes, where they receive data through props and render it. They do not have any internal state or lifecycle methods, making them lightweight and easy to reason about. Since they do not rely on state or lifecycle methods, they are also more performant.

Here’s an example of a functional stateless component:

const Greeting = (props) => {
  return Hello, {props.name}!;
};

// Usage:
;

PureComponent

PureComponent is a base class provided by React that extends the Component class. It is used for components that implement the shouldComponentUpdate lifecycle method with a shallow comparison of props and state.

When a PureComponent receives new props or updates its state, it will perform a shallow comparison of the new and previous values. If there are no changes, it will prevent unnecessary re-rendering, resulting in better performance.

PureComponent is useful when you have a component that relies on complex data structures or nested objects. By default, React’s default shouldComponentUpdate only performs a shallow comparison, so if your component relies on deep nested objects, it may not detect changes correctly. PureComponent solves this problem by performing a deep comparison.

Here’s an example of a PureComponent:

class Counter extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  render() {
    return (
      
        Count: {this.state.count}
        
      
    );
  }
}

// Usage:
;

Component

Component is the base class provided by React for creating class components. Unlike functional stateless components and PureComponent, components created with the Component class have access to React’s lifecycle methods and can manage their own state.

Components are used when you need to manage state, handle user interactions, or perform any other complex logic. They provide more flexibility but may also introduce more complexity compared to functional stateless components or PureComponent.

Here’s an example of a Component:

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      time: new Date(),
    };
  }

  componentDidMount() {
    this.timerID = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      time: new Date(),
    });
  }

  render() {
    return (
      
        Current time: {this.state.time.toLocaleTimeString()}
      
    );
  }
}

// Usage:
;

Summary

In summary, functional stateless components are lightweight and performant, suitable for presentational purposes. PureComponent is used when you want to optimize performance by preventing unnecessary re-renders. Component is used for managing state, handling user interactions, and performing complex logic.

Choosing the right type of component depends on the specific requirements of your project. Consider the purpose of the component, its dependencies, and the desired performance to make an informed decision.

React functional stateless component, PureComponent, Component; what are the differences and when should we use what?