Учитесь постоянно — всегда есть «еще одна вещь» для изучения!
Пользовательские хуки, это одна из функций, которые React позволяет нам писать и использовать без каких-либо проблем, мы можем думать о пользовательских хуках как о любых хуках, которые предлагает React, которые useEffect, useState и любые другие хуки, но когда вы пишете пользовательский хук, слово за вами, а предел — ваше творение и правила, которые React применяет при написании этих хуков. Сегодня мы узнаем, как написать пользовательский хук, с помощью которого вы можете получать данные, и вы можете использовать эти хуки в зависимости от ваших потребностей и везде, где вы необходимо получить данные внутри вашего приложения.
Давайте создадим наш файл, чтобы написать наш пользовательский хук для выборки, для начала нам нужно создать наш файл useFetch.ts и установить наш пользовательский хук, но прежде чем давайте загрузим библиотеку, которую мы будем использовать для выборки данных, мы будем использовать библиотеку Axios, вы можете использовать любую библиотеку, которую хотите, и написать тот же хук, и вы получите те же результаты.
yarn install axios npm install axios
Далее мы реализуем нашу логику внутри хука useFetch. внутри мы будем использовать хуки useState и useEffect и будем возвращать данные и состояния из пользовательского хука.
Наш последний шаг — использовать этот пользовательский хук в нашем приложении, для этого мы просто вызываем этот хук везде, где мы используем этот хук, и передаем URL-адрес, и все готово.
Теперь мы настраиваем наш пользовательский хук и используем его в нашем приложении и отображаем данные, визуализируем компонент на основе состояния, есть еще одна вещь, которую мы можем сделать, это снова и снова обновлять данные, чтобы сделать это. нужно вернуть функцию refetch из того же хука и использовать ее в нашем компоненте.
Давайте создадим кнопку в нашем App.tsx, чтобы мы могли обновлять данные снова и снова всякий раз, когда мы нажимаем эту кнопку, чтобы вам не нужно было обновлять страницу для получения новых данных.
Итак, это все, что вам нужно сделать, чтобы создать собственный хук в вашем приложении, вы можете настроить этот хук в зависимости от ваших потребностей и использовать его по своему усмотрению в своих приложениях.
