Итоги

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

• Эффект — это код, который React запускает после отрисовки компонента, для всего, что находится за пределами React: заголовка вкладки, таймеров, загрузки данных, localStorage. Он записывается как useEffect(() => { ... }, [зависимости]) и импортируется из "react", как и useState.
• Зависимости определяют, когда запускается эффект: без массива — после каждой отрисовки; с [] — один раз, когда компонент появляется; с [day] — в начале и при каждом изменении day. В них входят все переменные состояния и пропсы, которые использует эффект.
• Функция, которую возвращает эффект, — это его очистка. React вызывает её, когда компонент исчезает, и перед тем, как снова запустить эффект. Интервалу она нужна: return () => clearInterval(id); — функция, а не сразу вызванное clearInterval(id).
• Интервал, созданный при первой отрисовке, хранит значения той отрисовки, поэтому состояние он меняет с помощью функции-обновителя: setSeconds((seconds) => seconds + 1).
• Данные загружаются в эффекте, с помощью async-функции внутри него, которую эффект вызывает. Данные, loading и error в состоянии подсказывают странице, что показывать, а response.ok говорит, прислал ли сервер файл.
• Чтобы запомнить состояние, сохраните его в эффекте, который от него зависит, и прочитайте с помощью функции, переданной в useState: React вызывает её только для первой отрисовки.

В следующем уроке, «Мини-проект: Секундомер», вы создадите секундомер, интервал которого работает в эффекте: он запускается, останавливается, возвращается к нулю и засекает круги.

Но сначала немного практики: программа с выбором сцены, которая загружает группы из файла и запоминает выбранную сцену.