С помощью каких хуков можно хранить локальное состояние в React?

Введение в локальное состояние

Локальное состояние в React — это данные, которые принадлежат конкретному компоненту и управляются им напрямую. Оно используется для хранения временных значений, таких как ввод пользователя, флаги видимости или выбранные элементы. Для работы с таким состоянием React предоставляет встроенные хуки, которые делают управление простым и предсказуемым.

Хук useState

Хук useState — самый распространённый способ хранения локального состояния. Он принимает начальное значение и возвращает массив из двух элементов: текущее значение и функцию для его обновления. Обновление состояния вызывает повторный рендер компонента с новыми данными.

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Счётчик: {count}</p>
      <button onClick={() => setCount(count + 1)}>Увеличить</button>
    </div>
  );
}

Этот пример показывает, как просто хранить и изменять число. useState идеален для одиночных значений или простых объектов, когда логика обновления не слишком сложна.

Хук useReducer

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

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

useReducer удобен для управления формами, корзинами покупок или любыми состояниями, где обновления зависят от предыдущих значений и действий.

Когда какой использовать

• useState — для простых независимых значений (строки, числа, булевы).
• useReducer — для сложных объектов, когда несколько действий изменяют состояние, или когда логика обновления повторяется.

Оба хука являются частью ядра React и не требуют дополнительных библиотек. Они покрывают большинство потребностей в локальном состоянии, а для глобального состояния используются другие инструменты, такие как Context или Redux.

Вывод

Для хранения локального состояния в React используйте useState для простых случаев и useReducer для более сложной логики. Это базовые инструменты, которые должен знать каждый разработчик, работающий с React, так как они лежат в основе любого интерактивного интерфейса.