Managing state in ReactJS

Managing state in ReactJS is crucial for building dynamic and interactive user interfaces. Here’s a breakdown of the common approaches, from simple to more complex:

1. useState Hook (Functional Components):

• This is the most fundamental way to manage state in functional components.
• It allows you to declare state variables and update them.

JavaScript

import React, { useState } from 'react';

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

  const increment = () => {
    setCount(count + 1);
  };

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

• useState(0)¹ initializes the count state variable to 0.
• setCount is a function that lets you update the count state.

2. Class Component this.state (Class Components):

• Before hooks, class components used this.state to manage state.

JavaScript

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

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

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

• this.state initializes the state.
• this.setState() updates the state.

3. useReducer Hook (Complex State):

• useReducer is useful for managing more complex state logic, especially when state updates depend on previous state or involve multiple sub-values.
• It’s similar to Redux’s reducer concept.

JavaScript

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

function MyComponent() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
}

• A reducer function specifies how state should change based on actions.
• dispatch sends actions to the reducer.

4. Context API (Global State):

• The Context API allows you to share state between components without explicitly passing props through every level of the component tree.²
• It’s suitable for application-wide state (e.g., themes, user authentication).

JavaScript

import React, { createContext, useContext, useState } from 'react';

const CountContext = createContext();

function CountProvider({ children }) {
  const [count, setCount] = useState(0);

  return (
    <CountContext.Provider value={{ count, setCount }}>
      {children}
    </CountContext.Provider>
  );
}

function MyComponent() {
  const { count, setCount } = useContext(CountContext);

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

• createContext³ creates a context object.
• CountContext.Provider provides the state to components.
• useContext consumes the context value.

5. Redux/Zustand/Recoil (Complex Global State):

• For very large and complex applications, state management libraries like Redux, Zustand, or Recoil can be beneficial.
• They provide a centralized store for managing application-wide state and enforce a predictable state update pattern.
• Zustand and Recoil are generally considered easier to implement than Redux.

Choosing the Right Approach:

• For simple component-level state, useState is usually sufficient.
• For complex component-level state, useReducer can be helpful.
• For sharing state between components without prop drilling, the Context API is a good option.
• For very large and complex applications with global state, consider a state management library like Redux, Zustand or Recoil.