Итоги

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

• Пропсы идут вниз, от родителя к детям. Компонент не может прочитать состояние другого компонента.
• Когда нескольким компонентам нужно одно и то же состояние, поднимите его к их ближайшему общему родителю. Передайте значение вниз пропсами вместе с функцией, которая его меняет, с именем вида onX: onToggleFavorite, onSearchChange.
• Ребёнок вызывает функцию, родитель меняет своё состояние и отрисовывается заново, и каждый ребёнок получает новое значение.
• Функция-сеттер состояния — тоже функция, поэтому её можно передать вниз как есть: onSearchChange={setSearch}.
• Не храните то, что можно вычислить. Количества (favorites.length), итоги и отфильтрованные списки вычисляются при отрисовке из состояния и пропсов. Второе состояние, которое должно совпадать с первым, рано или поздно расходится с ним.
• useState(x) использует x только при первой отрисовке, поэтому список в состоянии, полученный из другого состояния, остаётся таким, каким был вначале.
• Единый источник истины: каждый фрагмент данных хранится в одном месте, а всё остальное читается или вычисляется из него. Для данных, которые должны пройти много уровней вниз, в React есть контекст.

В следующем уроке, «Эффекты», ваши компоненты начнут что-то делать после отрисовки: загружать список участников с сервера, запускать таймер и запоминать избранное в localStorage.

Но сначала немного практики: расписание по дням. DayTabs переключает пятницу и субботу, но день оставляет при себе, поэтому Timetable всегда показывает все группы.