Efikasni načini za smanjenje troškova računanja u Next.js-u

Korištenje `useEffect` za Debouncing u Next.js

React v16.8 predstavio je novi hook nazvan useEffect, koji vam omogućuje da pokrenete sporedne efekte u vašim funkcionalnim komponentama. useEffect je sjajan način za rukovanje skupim operacijama poput API poziva, ali može zahtijevati malo rada. U ovom postu ću vam pokazati kako koristiti useEffect za debouncing skupih procedura u Next.js.

Šta je debouncing?

Debouncing je tehnika za kontrolu brzine pozivanja funkcije. Korisna je kada imate skupu operaciju koju želite pokrenuti samo kada korisnik prestane tipkati, na primjer. U ovom slučaju možete debouncati API poziv tako da se on izvrši samo kada korisnik prestane tipkati određeno vrijeme.

useEffect

useEffect je hook koji vam omogućuje da pokrenete sporedne efekte u vašim funkcionalnim komponentama. Sličan je componentDidMount i componentDidUpdate u komponentama klase. Prvi argument je funkcija koja se poziva kada se komponenta montira ili ažurira. Drugi argument je niz ovisnosti. Ako se ovisnosti promijene, procedura će se pozvati ponovo. Ako je niz prazan, funkcija će se pozvati samo kada se komponenta montira.

import React, { useEffect } from 'react'

const MyComponent = () => {
  useEffect(() => {
    console.log('Ovo će se pozvati kada se komponenta montira')
  }, [])

  useEffect(() => {
    console.log('Ovo će se pozvati kada se komponenta montira i kada se ovisnosti promijene')
  }, [ovisnost1, ovisnost2])

  return <div>Zdravo svijete</div>
}

Kako debouncati u Next.js

Prvo što trebate učiniti je stvoriti prilagođeni hook koji će obrađivati debouncing. Evo jednostavnog primjera:

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
}

Ovaj hook prima dva argumenta: vrijednost koju treba debouncati i kašnjenje u milisekundama. On vraća debouncanu vrijednost. Hook koristi useEffect za postavljanje tajmera koji će ažurirati debouncanu vrijednost nakon zadanog kašnjenja. Također generira funkciju čišćenja koja briše tajmer ako se vrijednost ili ovisnost promijene.

Sada kada imamo hook koji može debouncati vrijednosti, možemo ga koristiti za debouncing API poziva. Evo primjera:

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

Ova komponenta će izvršiti API poziv na /api/search svaki put kada korisnik prestane tipkati 500 milisekundi. Debouncing će izvršiti API poziv s vrijednošću polja za unos kao upitni niz.

Performanse

Debouncing je jeftin način za rukovanje skupim operacijama u Next.js. Jeftiniji je od korištenja biblioteke poput lodash.debounce jer ne zahtijeva nikakve dodatne ovisnosti. Također je pristupačniji od korištenja biblioteke poput react-throttle jer ne zahtijeva nikakav dodatni kod koji se treba upakovati.

Zaključak

Debouncing je vrijedna tehnika za kontrolu brzine pozivanja funkcije. Korisna je kada imate skupu operaciju koju želite pokrenuti samo kada korisnik prestane tipkati. U ovom postu sam vam pokazao kako koristiti useEffect za debouncing skupih operacija u Next.js.

Ako vam se svidio ovaj post, možda će vam se svidjeti i JavaScript Hashmap, Performant and Simple.

Korištenje useEffect za Debouncing u Next.js