Debouncing sa Next.js

Paano Mag-debounce ng Mga Mahal na Operasyon sa Next.js Gamit ang useEffect

Ipinakilala ng React v16.8 ang bagong hook na tinatawag na useEffect, na nagbibigay-daan sa iyo na magpatakbo ng mga side effect sa iyong mga functional component. Ang useEffect ay isang mahusay na paraan upang pangasiwaan ang mga mahal na operasyon tulad ng mga API call, ngunit maaaring mangailangan ng kaunting trabaho. Sa post na ito, ipapakita ko sa iyo kung paano gagamitin ang useEffect upang mag-debounce ng mga mahal na procedure sa Next.js.

Ano ang debouncing?

Ang debouncing ay isang pamamaraan para sa pagkontrol sa rate kung saan tinatawag ang isang function. Ito ay kapaki-pakinabang kapag mayroon kang isang mahal na operasyon na gusto mong patakbuhin lamang kapag tumigil na ang pagta-type ng user, halimbawa. Sa kasong ito, maaari mong i-debounce ang API call para magawa lang ito kapag tumigil na ang pagta-type ng user sa loob ng isang tiyak na oras.

useEffect

Ang useEffect ay isang hook na nagbibigay-daan sa iyo na magpatakbo ng mga side effect sa iyong mga functional component. Ito ay katulad ng componentDidMount at componentDidUpdate sa mga class component. Ang unang argumento ay isang function na tinatawag kapag ang component ay naka-mount o na-update. Ang pangalawang argumento ay isang array ng mga dependency. Kung nagbago ang mga dependency, tatawagin ulit ang procedure. Kung ang array ay walang laman, ang function ay tatawagin lang kapag ang component ay naka-mount.

import React, { useEffect } from 'react'

const MyComponent = () => {
  useEffect(() => {
    console.log('Tatawagin ito kapag ang component ay naka-mount')
  }, [])

  useEffect(() => {
    console.log('Tatawagin ito kapag ang component ay naka-mount at kapag nagbago ang mga dependency')
  }, [dependency1, dependency2])

  return <div>Hello world</div>
}

Paano mag-debounce sa Next.js

Ang unang bagay na kailangan mong gawin ay ang paggawa ng isang custom hook na hahawak sa debouncing. Narito ang isang simpleng halimbawa:

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
}

Ang hook na ito ay tumatanggap ng dalawang argumento: ang value na i-debounce at ang delay sa milliseconds. Ibinabalik nito ang debounced value. Ginagamit ng hook ang useEffect upang magtakda ng isang timeout na mag-uupdate ng debounced value pagkatapos ng tinukoy na delay. Gumagawa rin ito ng isang cleanup function na naglilinis ng timeout kung ang value o uncertainty ay nagbago.

Ngayong mayroon na tayong hook na makakapag-debounce ng mga value, magagamit na natin ito upang mag-debounce ng mga API call. Narito ang isang halimbawa:

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)} />
}

Ang component na ito ay gagawa ng isang API call sa /api/search tuwing tumitigil ang pagta-type ng user sa loob ng 500 milliseconds. Ang debounce ay gagawa ng API call gamit ang value ng input field bilang query string.

Pagganap

Ang debouncing ay isang mura na paraan upang pangasiwaan ang mga mahal na operasyon sa Next.js. Mas mura ito kaysa sa paggamit ng library tulad ng lodash.debounce dahil hindi ito nangangailangan ng anumang dagdag na dependency. Mas mura rin ito kaysa sa paggamit ng library tulad ng react-throttle dahil hindi ito nangangailangan ng anumang karagdagang code na mai-bundle.

Konklusyon

Ang debouncing ay isang mahalagang pamamaraan para sa pagkontrol sa rate kung saan tinatawag ang isang function. Ito ay kapaki-pakinabang kapag mayroon kang isang mahal na operasyon na gusto mong patakbuhin lamang kapag tumigil na ang pagta-type ng user. Sa post na ito, ipinakita ko sa iyo kung paano gagamitin ang useEffect upang mag-debounce ng mga mahal na operasyon sa Next.js.

Kung nagustuhan mo ang post na ito, maaari mo ring magustuhan ang JavaScript Hashmap, Performant and Simple.