React State Management: Comparing `useState` Hook and Class `setState()`

React, a popular JavaScript library for building user interfaces, has evolved significantly since its inception. One of the most notable changes is the introduction of Hooks in React 16.8, which allows developers to use state and other React features without writing a class. This guide will compare the useState Hook with the traditional class-based setState() and this.state, highlighting their differences and use cases.

👉 Download eBook - JavaScript: from ES2015 to ES2023

.

1. Understanding State in React

State in React represents a component's dynamic data that can change over time. Managing state effectively is crucial for creating interactive and responsive applications.

2. Class Components: this.state and setState()

Before the introduction of Hooks, state management in React was handled primarily using class components.

Example:

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    this.increment = this.increment.bind(this);
  }

  increment() {
    this.setState((prevState) => ({ count: prevState.count + 1 }));
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

Key Points:

• Initialization: State is initialized in the constructor using this.state.
• Updating State: State updates are handled using setState(), which merges the new state with the previous state.
• Binding: Event handlers need to be bound to the component instance, often in the constructor.

3. Functional Components: useState Hook

Hooks allow functional components to manage state and side effects, making them more powerful and versatile.

Example:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Key Points:

• Initialization: State is initialized using the useState Hook.
• Updating State: State updates are handled using the state setter function (e.g., setCount).
• No Binding: There is no need to bind event handlers in functional components.

4. Detailed Comparison

5. When to Use Each Approach

Class Components:

• When working with legacy codebases that predominantly use class components.
• When you need to use lifecycle methods that are not easily replicated with Hooks.

Functional Components:

• When starting new projects or refactoring existing ones.
• When you want cleaner and more concise code.
• When you need to leverage the power of custom Hooks for reusability.

6. Conclusion

The introduction of Hooks, particularly the useState Hook, has transformed the way state is managed in React applications. While class components and their setState() method are still valid and necessary in some cases, functional components with useState offer a more streamlined and modern approach to state management. Understanding both approaches allows developers to make informed decisions based on the requirements of their projects and the nature of the codebase they are working with.

👉 Download eBook