useState в React не обновляет компонент: решение

Быстрый ответ

Для инициации перерисовки с помощью useState требуется обновить состояние, создав новую ссылку. React ведёт себя так, будто ничего не меняется, если встречает те же ссылки. Для получения новой ссылки для объектов или массивов используйте оператор расширения:

const [state, setState] = useState({ day: 'Понедельник' });

// Правильный подход: оператор расширения при обновлении состояния обеспечивает создание новой ссылки на объект
setState(prevState => ({ ...prevState, day: 'Уже воскресенье?' }));

Запомните: перерисовка не происходит, если обновление состояния подразумевает использование той же поначалу созданной ссылки.

Фактор страха состояния: Мутации и обновления

Немутабельность — ваш направляющий свет в мире обновлений состояния. Прямая мутация данных может вносить путаницу и приводить к трудноуловимым ошибкам, так как React реагирует на изменения, опираясь на сравнение по ссылкам. Следовательно, возвращайте новый объект или массив при обновлении состояния.

Для массивов 🔵 🔵 🔵:

const [numbers, setNumbers] = useState([1, 2, 3]);

// Вот так, подобно Iron Man'у, вы обновите свой арсенал...
setNumbers(oldNumbers => [...oldNumbers, 4]);

Для объектов 🔲 🔲 🔲:

const [user, setUser] = useState({ name: 'Брюс' });

// И конечно же, Брюс Бэннер может превратиться в Халка!
setUser(oldUser => ({ ...oldUser, name: 'Халк' }));

Подобный подход гарантирует создание новой ссылки, что будет точно инициировать перерисовку в React.

Блок и удар функциональных обновлений

Если новому состоянию необходимо базироваться на предыдущем, функциональное обновление представляет собой мощное средство. Оно решает проблему замыканий и оперирует с актуальным состоянием:

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

// Подобно энергии от Pikachu, увеличьте счётчик!
setCount(prevCount => prevCount + 1);

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

Остерегайтесь следующих паутин

Не мутируйте состояние напрямую

Избегайте прямых мутаций, например, numbers[2] = 99 или user.name = 'Thor', потому что React не обрабатывает такие манипуляции. Вместо этого используйте функцию setState, чтобы создать новый массив или объект.

Подробнее об этом расскажет наш спикер на видео

useEffect не работает без поддержки

Сочетание useState и useEffect ведёт к эффективной работе, как командная работа Batman'a и Robin'a; массив зависимостей — их Batmobile:

useEffect(() => {
  // Ядерный реактор полностью зависит от `state`
}, [state]); // Состояние находится в поле зрения!

В списках нет места поддельным ID

Когда вы рендерите списки, всегда используйте уникальные ключи для элементов. React использует ключи для определения изменений, добавлений или удалений:

numbers.map((number, index) => (
  // Гости с уникальными ID. Мы не в Matrix, мы не допускаем дубликаты!
  <li key={index}>{number}</li> 
));

Визуализация

Представьте useState как пульт управления в командном центре, который влияет на дисплей для просмотра. Если управляющие сигналы не изменяются, React просто не будет замечать каких-либо изменений.

⚪️ Состояние СТАТИЧНО (без изменений)
React:

Вроде бы, я могу отдохнуть, перемен нет. 🏖️

[Изменяем состояние с помощью useState]

🔵 Состояние ИЗМЕНЕНО (обновлено)
React:

Получены новые данные, нужно обновить дисплей! 🖥️

**Главная тезис:**

Обновился экран 🎥 (Перерисовка)

Новые указания сверху влекут за собой перерисовку дисплея.

## Развиваем ваш арсенал: Продвинутые паттерны

### Презентуем главкома: `useReducer`

Сложное состояние? Используйте `useReducer`. Здесь действия и редюсер отвечают за обновление.

### Секретный агент: Производное состояние

Иногда требуется создавать состояние на основе данных из внешних источников. В таких случаях `useMemo` становится вашим надёжным орудием:

// Секретное орудие, используйте с осторожностью... const derivedValue = useMemo(() => expensiveComputation(sourceValue), [sourceValue]);

```

Чем выше ранг, тем лучше обзор: поднятие состояния

Поделитесь состоянием, и ваши компоненты будут взаимодействовать как оркестр. Поднятие состояния улучшает координацию между компонентами.

Полезные материалы

1. Использование хука состояния — изучаем основы работы с useState.
2. Согласование — углубляем понимание механизма перерисовки и обновлений в React.
3. Часто задаваемые вопросы о хуках — экспертные рекомендации и ответы по работе с useState.
4. Полное руководство по useEffect — навигатор по миру useEffect.
5. Основательное руководство по React useState() хуку — лучшие стратегии использования useState.
6. Основной API React — поглядим за завесу того, как работает React.memo.
7. Функциональные vs классовые компоненты в React — мировые дебаты о паттернах программирования в React. Какую сторону вы предпочтёте?