Итоги

На этом уроке вы узнали, что:

• Состояние — это значение, которое React хранит для компонента между отрисовками: const [likes, setLikes] = useState(0); вместе с import { useState } from "react";. Обычная переменная начинается заново при каждой отрисовке, и её изменение страницу не меняет.
• Вызов сеттера заставляет React отрисовать компонент снова с новым значением и обновить страницу. Страницу вы не меняете сами, а состояние меняете только его сеттером.
• У компонента может быть несколько переменных состояния любого вида: числа, текст, логические значения (setOpen((open) => !open), чтобы показывать и скрывать), массивы и объекты. Что можно вычислить из состояния, то вычисляют при отрисовке.
• У каждого места, где используется компонент, своё состояние: три BandCard — три счётчика.
• Новое значение приходит со следующей отрисовкой. В обработчике переменная состояния всё ещё хранит старое. Когда нужно новое, сначала вычислите его в константе.
• Когда новое значение вычисляется из старого, передайте сеттеру функцию-обновитель: setLikes((likes) => likes + 1). React вызывает функции из очереди по порядку, каждую — с самым свежим значением.
• Никогда не меняйте состояние на месте. Создавайте новый массив или объект: добавляйте с помощью spread ([...schedule, id]), удаляйте с помощью filter(), меняйте один элемент с помощью map() и { ...song, played: true }, а объект меняйте так: { ...ticket, count: 2 }. После push() или ticket.count = 2 состояние — то же самое значение, и React не отрисовывает компонент заново.

На следующем уроке, «Формы», вы подключите к состоянию текстовые поля, флажки и выпадающие списки и научитесь добавлять в список новые элементы из формы.

Но сначала немного практики: голосование за группу фестиваля.