Что такое useReducer в React?

useReducer — это React-хук, позволяющий управлять состоянием компонента с помощью редьюсера — функции, аналогичной reducer из Redux.
Он особенно полезен, когда:

• состояние сложное (объект, массив),
• необходимо много условий/действий для изменения состояния,
• или когда требуется предсказуемое обновление с понятной логикой.

Синтаксис

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

• reducer — функция, которая принимает state и action, и возвращает новое состояние.
• initialState — начальное состояние.
• state — текущее состояние.
• dispatch(action) — способ вызвать обновление состояния.

Простой пример

import { 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>
      <p>Счет: {state.count}</p>
      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
    </div>
  );
}

Как работает редьюсер?

Редьюсер — это чистая функция, которая не имеет побочных эффектов и всегда возвращает новое состояние на основе текущего состояния и действия (action).

(state, action) => newState

Вывод

• useReducer — альтернатива useState, особенно полезна для сложной логики состояния.
• Позволяет централизованно управлять состоянием.
• Делает компонент более предсказуемым и тестируемым.