Создание пользовательских хуков может быстро сделать ваше приложение более легким в архитектуре и более понятным в коде для вас и других разработчиков.
Сегодня мы увидим, как создать свой собственный хук для извлечения данных из списка дел с сайта https://jsonplaceholder.typicode.com.
01 | Получить и назначить в компоненте
Этот метод работает очень хорошо, и вы, возможно, привыкли к нему.
С другой стороны, он очень быстро становится неуправляемым, как только вам нужно получить несколько разных данных.
Давайте посмотрим, как улучшить наш код
02 | Создайте собственный хук
Начнем с создания нового файла .js в новой папке с именем hooks.
Этот файл будет называться useTodos.js
(Обратите внимание на соглашение об именах для пользовательских хуков, все они начинаются с use‹something›)
На втором этапе давайте начнем с создания метода выборки данных внутри этого файла:
Затем мы можем создать новую константу, которую назовем как файл: useTodos.
Этот метод будет иметь локальное состояние, которое будет возвращаться в другие компоненты при вызове useTodos.
Теперь мы можем вызвать наш метод fetchTodos в методе useEffect и назначитьданные состоянию todos через setTodos.
Нам просто нужно вернуть состояние todos, и это… ГОТОВО! ✅
Давайте используем его в нашем приложении для получения и отображения данных!
Молодец!
Вам нужно помнить следующее:
Крючок – это простая функция, которая обрабатывает логический блок отдельно от вашего компонента и возвращает только то, что вам действительно нужно
Исходный код на моем Github:
https://github.com/horhorou/create-first-hook
