Как создать пользовательские хуки в React?

Как работают пользовательские хуки в React?

Пользовательские хуки React работают как другие хуки react, вы должны определить хуки в верхней части. Я создал один пользовательский хук useScroll

export const FunctionName = () => {
    const { status } = useScroll()

Итак, давайте разберемся с ним подробнее. Мы создадим файл и создадим в нем функцию useScroll. Помните, что для создания пользовательских хуков нужно добавить use перед именем функции. Пользовательские хуки возвращают состояния, переменные и функции, Как вы видели ниже, функция useScroll возвращает состояние.

import { useEffect, useState } from 'react'

export const useScroll = () => {
    const [status, setstatus] = useState(false)

    return { status }
}

Итак, мы почти создали хук, давайте посмотрим, что он возвращает. Я собираюсь вызвать хук в компоненте Nav и после уничтожения useScroll мы получили от него статус, который мы возвращаем из компонента useScroll. В следующей строке мы собираемся вывести статус на консоль.
Угадайте, что получится в результате?

export const Nav = () => {
    const { status } = useScroll()
    console.log(status)

О да, вы угадали, он возвращает false. Знаете ли вы, как сделать статус истинным? Давайте снова перейдем к функции useScroll и посмотрим, что мы можем сделать. Я создал в ней функцию onStateUpdate и обновил в ней статус, а затем вернул его из функции useScroll.

export const useScroll = () => {
    const [status, setstatus] = useState(false)

    const onStateUpdate = () => {
        setstatus(!status)
    }
    return { status, onStateUpdate }
}

Мы перейдем к компоненту Nav, где мы вызвали хук useScroll. и мы собираемся разрушить функцию onStateUpdate хука useScroll и собираемся использовать его. когда мы нажмем на кнопку, состояние изменится с false на true и true на false.

export const Nav = () => {
    const { status , onStateUpdate } = useScroll()
    console.log(status)`
   return <button onClick={onStateUpdate}>
          Click to change it to :{status}
          </button>
}

Зачем нам нужны пользовательские хуки?
Так как нам иногда приходится выполнять один и тот же код несколько раз, чтобы избежать этого, мы создаем пользовательский хук. Он работает как обычная функция, в которой мы можем обновлять состояние и даже использовать другие хуки, такие как useRef, useEffect и другие.

С уважением,

Мухаммад Билал