> В каких случаях использовать useState и Redux и почему (React)

Короткий ответ

useState подходит для локального состояния компонента: формы, toggle, инпуты. Redux - для глобального состояния, которое нужно множеству компонентов или сохранять между сессиями. Основной критерий - масштаб и сложность обновлений: если состояние передаётся через 3+ уровня пропсов или требует сложной логики синхронизации, выбирайте Redux. Для простых случаев useState эффективнее и проще.

Подробное объяснение

useState - встроенный хук React для управления состоянием внутри одного компонента или небольшого дерева. Он идеален, когда:

• состояние используется только в одном компоненте или его прямых потомках
• обновления происходят редко и не требуют сложной логики
• нет необходимости в middleware или devtools

Redux - библиотека для централизованного управления состоянием с предсказуемыми обновлениями через actions и reducers. Его стоит применять, когда:

• состояние нужно в разных частях приложения (например, данные пользователя, корзина)
• есть сложная асинхронная логика (запросы, кеширование)
• требуется отладка через time-travel или логирование
• приложение имеет много вложенных компонентов, где prop drilling становится проблемой

Ключевой trade-off: Redux добавляет boilerplate и сложность, но даёт контроль и масштабируемость. Для небольших приложений или изолированных UI-состояний useState предпочтительнее.

На практике

В реальных проектах часто используют комбинацию: useState для UI-состояний (модалки, фильтры, формы) и Redux для бизнес-данных (авторизация, заказы, настройки). Например, в e-commerce: состояние корзины - Redux, состояние выпадающего меню - useState.

Паттерн "lifting state up" (подъём состояния) - альтернатива Redux для средних приложений: общее состояние выносится в родительский компонент и передаётся через props. Но при 4+ уровнях вложенности это становится неудобно.

Современные альтернативы: Context API + useReducer для средних проектов, Zustand или Jotai для лёгкого глобального состояния. Redux остаётся стандартом для enterprise-приложений с жёсткими требованиями к предсказуемости и тестируемости.

Пример кода

JSX
// useState - локальное состояние
function SearchInput() {
  const [query, setQuery] = useState('');
  return <input value={query} onChange={e => setQuery(e.target.value)} />;
}

// Redux - глобальное состояние
// store/cartSlice.js
const cartSlice = createSlice({
  name: 'cart',
  initialState: { items: [] },
  reducers: {
    addItem: (state, action) => { state.items.push(action.payload); }
  }
});

// Component.jsx
function CartButton() {
  const dispatch = useDispatch();
  const items = useSelector(state => state.cart.items);
  return <button onClick={() => dispatch(addItem({ id: 1 }))}>Add ({items.length})</button>;
}

Как отвечать на собеседовании

Начните с чёткого разделения: useState для локального, Redux для глобального. Приведите конкретные примеры из опыта, где выбор был оправдан. Упомяните trade-off: Redux даёт предсказуемость, но требует больше кода. Покажите понимание альтернатив (Context, Zustand) и когда они уместны. Избегайте абсолютных утверждений - всегда есть контекст.

Что проверяет интервьюер

• Понимание разницы между локальным и глобальным состоянием
• Умение оценивать сложность и выбирать правильный инструмент
• Знание trade-off и альтернатив
• Практический опыт: не просто теория, а реальные кейсы
• Способность аргументировать решение

Типичные ошибки

• Использование Redux для всего, даже для toggle-состояния
• Использование useState для данных, которые нужны в 5 компонентах на разных уровнях
• Игнорирование Context API как промежуточного решения
• Переусложнение архитектуры: Redux с одной переменной
• Непонимание, что Redux не решает проблемы производительности автоматически