В чем разница между useState и useReducer

«В чем разница между useState и useReducer» — вопрос из категории React, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

useState и useReducer оба используются для управления состоянием в React, но у них есть ключевые различия:

  1. Простота vs. Сложность

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

    • В useState логика обновления пишется прямо в компоненте.
    • В useReducer логика выносится в редьюсер, что упрощает тестирование и переиспользование.
  3. Синтаксис
    // useState
    const [count, setCount] = useState(0);
    setCount(prev => prev + 1);

    // useReducer
    const [state, dispatch] = useReducer(reducer, { count: 0 });
    dispatch({ type: 'increment' });

Когда выбрать useReducer?

  • Если следующее состояние зависит от предыдущего.
  • Если есть много действий, изменяющих состояние.
  • Для оптимизации производительности (редьюсеры могут избежать лишних ререндеров).