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

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

useState - для локального состояния компонента: формы, toggle, временные данные. Redux - для глобального состояния, которое нужно множеству компонентов или сохранять между сессиями: данные пользователя, корзина, настройки. Redux оправдан при сложной логике обновления, middleware (saga/thunk) и необходимости дебаггинга через devtools. Для простых приложений useState и Context API достаточно.

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

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

Redux - библиотека с единым store, immutable updates и строгим потоком данных через actions/reducers. Он решает проблему prop drilling и обеспечивает предсказуемость. Однако добавляет boilerplate и сложность.

Ключевые критерии выбора:

• Масштаб: если состояние нужно в 2-3 компонентах - useState + lifting state up. Если в 10+ на разных уровнях - Redux.
• Частота обновлений: useState лучше для частых изменений (например, ввод текста). Redux может быть избыточным из-за подписок.
• Сложность логики: Redux с middleware (redux-saga) удобен для асинхронных цепочек (запрос → кеш → обновление UI).
• Персистентность: Redux легко интегрируется с localStorage через middleware.
• Команда: Redux даёт единый контракт (типы actions, reducers), что упрощает онбординг.

Для middle-уровня важно понимать trade-off: Redux решает проблемы, но не бесплатно. Альтернативы - Zustand, MobX, Recoil - могут быть легче.

На практике

Типичные сценарии:

• useState: состояние формы (имя, email), видимость попапа, выбранный элемент списка, таймер.
• Redux: авторизация (user token), корзина интернет-магазина, тема приложения (dark/light), кеш данных с сервера (список товаров).

Плохой паттерн: класть в Redux всё подряд. Например, состояние инпута в форме - это локально, не нужно глобально.

Хороший паттерн: комбинировать - Redux для глобального, useState для UI-деталей. Например, Redux хранит список задач, а useState - текущий фильтр или состояние редактирования.

Пример кода

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

// Redux - глобальное состояние
// store.js
const userReducer = (state = null, action) => {
  switch (action.type) {
    case 'SET_USER': return action.payload;
    default: return state;
  }
};

// Component.jsx
function UserProfile() {
  const user = useSelector(state => state.user);
  const dispatch = useDispatch();
  return <div>{user?.name}</div>;
}

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

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

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

• Понимание архитектуры React: когда состояние должно быть локальным.
• Умение оценивать сложность: не использовать Redux "на всякий случай".
• Знание проблем prop drilling и когда Redux их решает.
• Практический опыт: умение объяснить на реальных кейсах.

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

• Класть в Redux всё состояние, включая временные UI-данные (например, значение инпута).
• Использовать Redux для данных, которые нужны только одному компоненту.
• Игнорировать Context API как более лёгкую альтернативу для простых глобальных данных (тема, язык).
• Не учитывать производительность: частые dispatch могут вызывать лишние ререндеры.