Хуки — это функции, которые позволяют вам «подключаться» к состоянию React и функциям жизненного цикла из функциональных компонентов. Хуки не работают внутри компонента класса, только в компоненте функции.
Создание уникальных хуков должно быть приоритетнее повторяющегося кодирования и следования рекомендуемым практикам.
Одна из замечательных особенностей React — использование многократно используемых компонентов, и это не ограничивается компонентами JSX в React, сами функции являются многократно используемыми. При создании приложения вы часто будете выполнять получение данных, связанных с состоянием и жизненным циклом программы.
Цель пользовательского хука — создать функцию, которую вы можете быстро повторно использовать в разных областях вашего приложения, чтобы избежать DRY-кода и повысить производительность и эффективность приложения.
У вас есть приложение с экранами Home и Profile. Данные пользователя должны отображаться на обоих экранах. Вы создаете вызов API на главном экране и дублируете его на экране профиля, чтобы отобразить данные пользователя на обоих экранах. Если пользователь перейдет на любой из экранов, данные будут получены, что нормально, поскольку вы успешно получили данные из API и представили их на каждой панели.
const getUserProfile = useCallback(() => {
// API call logic
}, [])
useEffect(() => {
getUserProfile()
}, [getUserProfile])
Превращение функции вызова API в хук, который можно вызывать из Home и Profile, является простым решением и рекомендуемой практикой. Это уменьшит количество DRY-кода и повысит эффективность вашего приложения.
export const useGetUserProfile = () => {
const [userProfile, setUserProfile] = useState()
const getUserProfile = useCallback(() => {
// API call logic
})
useEffect(() => {
getUserProfile()
}, [getUserProfile])
return {userProfile}
}
Пользовательские хуки — это функции, но не все функции могут быть названы хуками, ниже перечислено, что делает функцию хуком:
- Она должна иметь имя, начинающееся со слова use.
- Она должна быть названа в верблюжьем регистре.
Начните разрабатывать свои собственные пользовательские хуки, потому что хуки в React могут решить широкий спектр проблем, которые кажутся не связанными между собой.