Глава 19. Кастомные хуки: как переиспользовать логику
Зачем эта глава
Кастомные хуки помогают выносить повторяющуюся логику в отдельную функцию и использовать её в разных компонентах.
Теория (коротко)
Кастомный хук — это обычная функция, которая использует React-хуки внутри.
Название всегда начинается с use.
function useCounter(initial = 0) {
const [count, setCount] = useState(initial);
const inc = () => setCount((c) => c + 1);
return { count, inc };
}
Подсказка: кастомный хук не должен изменять DOM напрямую — пусть он возвращает данные и методы.
Задания
Задание: useToggle
- Напиши хук useToggle.
- Верни значение и функцию переключения.
- Используй хук в двух компонентах.
Проверка себя
Ты умеешь выносить логику в кастомные хуки.
Мини-проект
Цель: хук для работы с localStorage.
Требования: чтение и запись значения.
Критерий готовности: состояние сохраняется после перезагрузки страницы.
Словарь главы
- Кастомный хук
- Функция для переиспользования логики.
- useToggle
- Хук-переключатель, часто используемый в примерах.