Запоминаем избранное

В этом приложении любимые группы отмечаются звёздочкой. Но нажмите «Запустить», и звёздочки пропали: состояние живёт только пока открыта страница. В курсе JavaScript такие данные хранились в localStorage. В React для этого два шага.

Сохранение. Запись в localStorage происходит за пределами React, значит, это работа для эффекта. Он должен запускаться при каждом изменении избранного, поэтому его зависимость — favorites. localStorage хранит только текст, поэтому массив записывается как JSON:

useEffect(() => {
    localStorage.setItem("favorites", JSON.stringify(favorites));
}, [favorites]);

Чтение. Когда приложение запускается, избранное должно прийти из localStorage, чтобы уже самая первая отрисовка его показала. Начальное значение состояния — аргумент useState. Но React использует этот аргумент только при первой отрисовке, а читать и разбирать JSON при каждой отрисовке — лишняя работа. Поэтому передайте useState функцию. React вызовет её только один раз, для первой отрисовки, и состояние начнётся с того, что она вернёт:

const [favorites, setFavorites] = useState(() => {
    const saved = localStorage.getItem("favorites");
    return saved === null ? [] : JSON.parse(saved);
});

getItem() возвращает null, если ничего не сохранено, например при первом открытии приложения. Тогда избранное начинается с пустого массива.

Как и в курсе JavaScript, каждое нажатие «Запустить» запускает страницу заново, как при перезагрузке, и страница находит то, что сохранила в прошлые запуски. Кнопка консоли Очистить сохранённые данные удаляет это.

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

• Сохранить массив без JSON.stringify(): localStorage превращает его в текст 2,4, который JSON.parse() не сможет прочитать обратно.
• Читать без проверки на null: JSON.parse(null) даёт null, и тогда favorites.includes() завершается с ошибкой TypeError.