Rêbazên kêmkirina mesrefên hesabkirinê di Next.js de

Çi ye debouncing e?

Debouncing teknîkek e ji bo kontrolkirina rêjeya ku fonksiyonek tê bang kirin. Ew kêrhatî ye dema ku we xebateke biha heye ku hûn dixwazin tenê dema ku bikarhêner rawestiyaye nivîsandinê bimeşînin, mînak. Di vê rewşê de, hûn dikarin banga API-yê debounce bikin da ku ew tenê gava bikarhêner ji bo demek diyarkirî rawestiyaye nivîsandinê were kirin.

useEffect

useEffect hook e ku destûrê dide we ku hûn bandorên aliyê di pêkhateyên fonksiyonel de bimeşînin. Ew dişibihe componentDidMount û componentDidUpdate di pêkhateyên pola de. Argûmana yekem fonksiyonek e ku gava pêkhateyê tê saz kirin an nûvekirin tê bang kirin. Argûmana duyemîn rêzek girêdayî ye. Heke girêdayî biguherin, prosedur dê careke din were bang kirin. Heke rêz vala be, fonksiyon dê tenê gava pêkhateyê tê saz kirin were bang kirin.

import React, { useEffect } from 'react'

const MyComponent = () => {
  useEffect(() => {
    console.log('Ev dê were bang kirin gava pêkhateyê tê saz kirin')
  }, [])

  useEffect(() => {
    console.log('Ev dê were bang kirin gava pêkhateyê tê saz kirin û dema ku girêdayî diguherin')
  }, [dependency1, dependency2])

  return <div>Silav cîhanê</div>
}

Çawa debounce di Next.js de?

Tişta yekem ku hûn hewce ne bikin ev e ku hûn hook-ek xweş bikin ku dê debouncing-ê bi rêve bibe. Li vir mînakek hêsan e:

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
}

Ev hook du arguman digire: nirxê ji bo debounce û derengî di mîlyewî saniyeyan de. Ew nirxa debounce-ê vedigerîne. Hook useEffect bikar tîne ji bo danîna demek ku dê nirxa debounce-ê piştî derengiya diyarkirî nûve bike. Ew her weha fonksiyonek paqijkirinê çêdike ku demekê zelal dike heke nirx an neteweyî biguherin.

Niha ku me hook-ek heye ku dikare nirxan debounce bike, em dikarin wê bikar bînin ji bo debounce kirina bangan API-yê. Li vir mînakek e:

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

Ev pêkhate dê bangek API-yê bike ji bo /api/search her gava ku bikarhêner ji bo 500 mîlyewî saniyeyan raweste nivîsandinê. Debounce dê banga API-yê bike bi nirxa qada têketinê wekî stringa lêgerînê.

Performans

Debouncing rêyek erzan e ji bo rêvebirina xebatên biha di Next.js de. Ew ji bikaranîna pirtûkxaneyek wekî lodash.debounce erzan e ji ber ku ew hewceyê ti girêdayîyên zêde tune. Ew her weha ji bikaranîna pirtûkxaneyek wekî react-throttle erzan e ji ber ku ew hewceyê ti kodên zêde tune ku werin pakêt kirin.

Encam

Debouncing teknîkek hêja ye ji bo kontrolkirina rêjeya ku fonksiyonek tê bang kirin. Ew kêrhatî ye dema ku we xebateke biha heye ku hûn dixwazin tenê dema ku bikarhêner rawestiyaye nivîsandinê bimeşînin. Di vê postê de, min nîşan da we ka çawa useEffect bikar tînin ji bo debounce kirina xebatên biha di Next.js de.

Heke hûn ji vê postê kêfxweş bûn, hûn dikarin JavaScript Hashmap, Performant and Simple jî hez bikin.