Как использовать откат в Next.js

React v16.8 представил новый хук под названием useEffect, который позволяет запускать побочные эффекты в ваших функциональных компонентах. useEffect — отличный способ обработки дорогостоящих операций, таких как вызовы API, но это может потребовать некоторой работы. В этом посте я покажу вам, как использовать useEffect для устранения дребезга дорогостоящих процедур в Next.js.

Что такое дебаунс?

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

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

useEffect — это хук, который позволяет запускать побочные эффекты в ваших функциональных компонентах. Это похоже на componentDidMount и componentDidUpdate в компонентах класса. Первый аргумент — это функция, вызываемая при монтировании или обновлении компонента. Второй аргумент — это массив зависимостей. Если зависимости изменятся, процедура будет вызвана снова. Если массив пуст, функция будет вызываться только при монтировании компонента.

import React, { useEffect } from 'react'

const MyComponent = () => {
  useEffect(() => {
    console.log('This will be called when the component mounts')
  }, [])

  useEffect(() => {
    console.log('This will be called when the component mounts and when the dependencies change')
  }, [dependency1, dependency2])

  return <div>Hello world</div>
}

Как бороться с дребезгом в Next.js

Первое, что вам нужно сделать, это создать собственный хук, который будет обрабатывать отмену дребезга. Вот простой пример:

import { useState, useEffect } from 'react'

export default function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value)

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value)
    }, delay)

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

  return debouncedValue
}

Эта ловушка принимает два аргумента: значение для устранения дребезга и задержку в миллисекундах. Он возвращает отклоненное значение. Хук использует useEffect для установки тайм-аута, который обновит отклоненное значение после указанной задержки. Он также создает функцию очистки, которая уточняет время ожидания при изменении значения или неопределенности.

Теперь, когда у нас есть хук, который может устранять возврат значений, мы можем использовать его для устранения отказов вызовов API. Вот пример:

import useDebounce from './useDebounce'

export default function Search() {
  const [search, setSearch] = useState('')
  const debouncedSearch = useDebounce(search, 500)

  useEffect(() => {
    if (debouncedSearch) {
      fetch(`/api/search?q=${debouncedSearch}`)
    }
  }, [debouncedSearch])

  return <input type="text" value={search} onChange={(e) => setSearch(e.target.value)} />
}

Этот компонент будет вызывать API к /api/search всякий раз, когда пользователь перестает печатать в течение 500 миллисекунд. Дебаунс вызовет API со значением поля ввода в качестве строки запроса.

Производительность

Отмена дребезга — это дешевый способ обработки дорогостоящих операций в Next.js. Это дешевле, чем использование такой библиотеки, как lodash.debounce, поскольку не требует дополнительных зависимостей. Кроме того, это более доступно, чем использование такой библиотеки, как react-throttle, поскольку не требует связывания дополнительного кода.

Заключение

Устранение дребезга — ценный метод контроля скорости вызова функции. Это удобно, когда у вас есть дорогостоящая операция, которую вы хотите запустить только тогда, когда пользователь перестал печатать. В этом посте я показал вам, как использовать useEffect для устранения дребезга дорогостоящих операций в Next.js.

Если вам понравился этот пост, вам также может понравиться Хэш-карта JavaScript, производительность и простота.

Первоначально опубликовано здесь