Собственный хук

В уроке про эффекты вы сделали так, чтобы избранное сохранялось: useState с функцией, которая читает localStorage, и эффект, который сохраняет туда значение. Теперь в приложении появились ещё и заметки, и они тоже должны сохраняться. Можно было бы скопировать эти строки в Notes.jsx и поменять ключ. Но React позволяет лучше: написать эти строки один раз в собственной функции и вызывать её из обоих компонентов.

Такая функция — ваш собственный хук: функция, имя которой начинается с use и которая вызывает другие хуки. Вот небольшой пример. Он хранит true или false и возвращает это значение вместе с функцией, которая его переключает:

import { useState } from "react";

export default function useToggle(initialValue) {
    const [on, setOn] = useState(initialValue);

    function toggle() {
        setOn((on) => !on);
    }

    return [on, toggle];
}

Компонент вызывает его так же, как useState: const [showInfo, toggleInfo] = useToggle(false);. Хук возвращает массив, поэтому каждый компонент сам даёт этим двум значениям имена.

Две вещи, которые нужно знать:

• Хук делится кодом, а не состоянием. Каждый компонент, который вызывает useToggle, получает собственное on, как и при каждом вызове useState. Когда меняется одно, остальные не меняются.
• Хук — это обычный JavaScript, без JSX, поэтому его файл заканчивается на .js: useToggle.js. Импортируется он так же, как компонент: import useToggle from "./useToggle.js";

Ваш хук будет называться useLocalStorage(key, initialValue). Он работает как useState, но запоминает значение в localStorage под ключом key. Файл useLocalStorage.js уже создан: пока хук просто возвращает то, что вернул useState. Внутри ему нужны те же две части, что и у избранного в уроке про эффекты, только с key вместо "favorites" и initialValue вместо []. Эффект теперь тоже использует key, поэтому его зависимости — [key, value].