Подавление шума в Next.js

Дебаунсинг дорогих операций в Next.js с помощью useEffect

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

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

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

useEffect

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

import React, { useEffect } from 'react'

const MyComponent = () => {
  useEffect(() => {
    console.log('Это будет вызвано при монтировании компонента')
  }, [])

  useEffect(() => {
    console.log('Это будет вызвано при монтировании компонента и при изменении зависимостей')
  }, [dependency1, dependency2])

  return <div>Привет мир</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 Hashmap, производительный и простой.