Общие паттерны проектирования React: Пользовательские крючки

Я начал серию статей под названием “Общие паттерны проектирования React”, в которой я хочу попрактиковаться друг с другом в некоторых основных паттернах проектирования, используемых в React. Чтобы мы могли быть достаточно уверенными, чтобы применять их в нашей повседневной разработке.

Знание этих паттернов полезно, потому что это может сэкономить наше время как разработчиков, и это представит приложение как высокопроизводительное и восхитительное для наших клиентов.

Пользовательские крючки

Один из основных паттернов проектирования, который мы используем ежедневно, – это “пользовательские крючки”. Он широко используется как предпочтительный способ модуляции и применения принципа DRY в нашем приложении. Мы можем разделить сложное поведение между несколькими компонентами с помощью пользовательских крючков.

Пример

хук useDebounce

Совет: Debounce откладывает вызов функции до тех пор, пока не истекут миллисекунды ожидания с момента последнего вызова отложенной функции.

import { useEffect, useState } from 'react'

function useDebounce<T>(value: T, delay?: number): T {
  const [debouncedValue, setDebouncedValue] = useState<T>(value)

  useEffect(() => {
    const timer = setTimeout(() => setDebouncedValue(value), delay || 500)

    return () => {
      clearTimeout(timer)
    }
  }, [value, delay])

  return debouncedValue
}

export default useDebounce

Используя функцию возврата useEffect после изменения value или delay, React очищает идентификатор таймера и функция внутри setTimeout не будет запущена. Поэтому она отлаживается. 👌

Использование

import React, { ChangeEvent, useEffect, useState } from 'react'

import { useDebounce } from 'usehooks-ts'

export default function Component() {
  const [value, setValue] = useState<string>('')
  const debouncedValue = useDebounce<string>(value, 500)

  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
    setValue(event.target.value)
  }

  // Fetch API (optional)
  useEffect(() => {
    // Do fetch here...
    // Triggers when "debouncedValue" changes
  }, [debouncedValue])

  return (
    <div>
      <p>Value real-time: {value}</p>
      <p>Debounced value: {debouncedValue}</p>

      <input type="text" value={value} onChange={handleChange} />
    </div>
  )
}

Кредит: useHooks-ts *

Библиотеки

Вам не обязательно создавать общие сценарии с нуля. Существуют фантастические пакеты, которые можно быстро изучить и использовать. Здесь я перечислил несколько надежных игроков.

react-use * ⭐️ 29.6k / 🔽 958k
ahooks * ⭐️ 9.1k / 🔽 74k
awesome-react-hooks * ⭐️ 8.1k / 🔽 74k
usehooks-ts * ⭐️ 1.6k / 🔽 44k
react-recipes * ⭐️ 850 / 🔽 1.2k
react-hanger * ⭐️ 1.8k / 🔽 3.3k

Ссылки

React offcial doc *