useState vs useReducer in React

#react #usestate #usereducer #beginners

What is useState?

useState is a React Hook that allows functional components to create and manage state. Before Hooks were introduced, state could only be managed inside class components. With useState, developers can store values such as numbers, strings, booleans, arrays, and objects directly inside functional components and update them whenever needed.

Whenever the state changes, React automatically re-renders the component and updates the UI with the latest data.

Syntax

const [state, setState] = useState(initialValue);

--> state → Current value of the state.
--> setState → Function used to update the state.
--> initialValue → Initial value assigned to the state.

Example: Counter Application

import React, { useState } from "react";

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

  return (
    <div>
      <h2>Count: {count}</h2>

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

export default Counter;

How it Works
=> useState(0) initializes the state with 0.
=> count stores the current value.
=> setCount() updates the value.
=> When the button is clicked, React re-renders the component with the updated count.

When to Use useState?

--> Counter applications
--> Show/Hide functionality
--> Theme switching
--> Simple forms
--> Managing a single piece of state

What is useReducer?

useReducer is a React Hook used for managing complex state logic. Instead of updating state directly, it uses a reducer function and actions to determine how the state should change.

It follows the same concept as Redux, where actions are dispatched and a reducer function decides the next state based on the action type.

useReducer is useful when a component has multiple state values or complex update logic.

Syntax


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

=> state → Current state.
=> dispatch → Function used to send actions.
=> reducer → Function that handles state updates.
=> initialState → Initial state value.

Example: Counter using useReducer

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 Counter() {
  const [state, dispatch] = useReducer(
    reducer,
    initialState
  );

  return (
    <div>
      <h2>Count: {state.count}</h2>

      <button onClick={() =>
        dispatch({ type: "increment" })
      }>
        Increment
      </button>

      <button onClick={() =>
        dispatch({ type: "decrement" })
      }>
        Decrement
      </button>
    </div>
  );
}

export default Counter;

How it Works

--> initialState stores the starting state.
--> reducer() receives the current state and action.
--> dispatch() sends an action.
--> The reducer decides how the state should change.
--> React re-renders the component with the updated state.

Real-World Example
Using useState

const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [age, setAge] = useState("");

--> This is fine for a small form with a few fields.

Using useReducer

const initialState = {
  name: "",
  email: "",
  age: ""
};

function reducer(state, action) {
  switch (action.type) {
    case "UPDATE_NAME":
      return { ...state, name: action.payload };

    case "UPDATE_EMAIL":
      return { ...state, email: action.payload };

    case "UPDATE_AGE":
      return { ...state, age: action.payload };

    default:
      return state;
  }
}

--> For large forms with validations and multiple updates, useReducer keeps the code cleaner and easier to maintain.

DEV Community

useState vs useReducer in React

Top comments (0)