Next.js-de hasaplama çykdawlaryny azaltmagyň usullary

React-da useEffect bilen howply işleri debounce etmek

React 16.8-de, funksiýonal komponentlerde ýanaky işleri ýerine ýetirmek üçin useEffect atly täze bir hook geldi. useEffect, API çagyryşlary ýaly gymmat işlemleri işlemek üçin ajaýyp bir ýol, ýöne käbir işlere gerek bolar. Bu ýazgyda, useEffect-i Next.js-de gymmat proseduralary debounce etmek üçin nähili ulanmagyny görkezeris.

Debouncing näme?

Debouncing, bir funksiýanyň çagyrylýan tizligini ýönetmek üçin ulanylýan bir usul. Mysal üçin, ulanyjy ýazmagy bes edende ýerine ýetirilmeli gymmat bir işlemiňiz bolsa, peýdalydyr. Bu ýagdaýda, ulanyjy belli bir wagtlap ýazmagy bes edende ýerine ýetiriljek ýaly, API çagyryşyny debounce edip bilersiňiz.

useEffect

useEffect, funksiýonal komponentlerde ýanaky işleri ýerine ýetirmek üçin mümkinçilik berýän bir hook. Klas komponentlerdäki componentDidMount we componentDidUpdate-a meňzeýär. Birinji argument, komponent ýüklenende ýa-da täzelenende çagyrylýan bir funksiýa. Ikinji argument, baglylyklar massiwi. Baglylyklar üýtgesende, prosedýura ýene-de çagyrylar. Massiw boş bolsa, funksiýa diňe komponent ýüklenende çagyrylar.

import React, { useEffect } from 'react'

const MyComponent = () => {
  useEffect(() => {
    console.log('Bu komponent ýüklenende çagyrylar')
  }, [])

  useEffect(() => {
    console.log('Bu komponent ýüklenende we baglylyklar üýtgesende çagyrylar')
  }, [baglylyk1, baglylyk2])

  return <div>Salam dünýä</div>
}

Next.js-de debounce etmegiň usuly

Ilki bilen, debounce-i işlejek özleşdirilen bir hook döretmeli. Gowy mysal:

import { useState, useEffect } from 'react'

export default function useDebounce(deger, gecikme) {
  const [debouncedDeger, setDebouncedValue] = useState(deger)

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(deger)
    }, gecikme)

    return () => {
      clearTimeout(handler)
    }
  }, [deger, gecikme])

  return debouncedDeger
}

Bu hook iki argument kabul edýär: debounce ediljek deger we millisekundlarda gecikme. Debounce edilen degeri gaýtarýar. Hook, useEffect-i belli bir gecikmeden soň debounce edilen degeri täzeläýän bir waxt ölçegini gurmak üçin ulanýar. Şeýle-de, deger ýa-da baglylyk üýtgesende waxt ölçegini arassalaýan arassalaýyş funksiýasyny döredýär.

Indi, degerleri debounce ede bilýän bir hookymyz bardygy üçin, ony API çagyryşlaryny debounce etmek üçin ulanyp bileris. Mysal:

import useDebounce from './useDebounce'

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

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

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

Bu komponent, ulanyjy ýazmagy 500 millisekundlap bes edende /api/search-e API çagyryşy ýerine ýetirer. Debounce, girdi meýdanynyň degerini sorag satyry hökmünde ulanyp, API çagyryşyny ýerine ýetirer.

Ýerine ýetiriliş

Debouncing, Next.js-de gymmat işlemleri işlemek üçin arzan bir ýol. lodash.debounce ýaly kitaphanany ulanmakdan has arzan, sebäbi hiç hili goşmaça baglylyklara gerek däl. react-throttle ýaly kitaphanany ulanmakdan has arzan, sebäbi hiç hili goşmaça kodyň toparlanmagyna gerek däl.

Netije

Debouncing, bir funksiýanyň çagyrylýan tizligini ýönetmek üçin peýdaly bir usul. Ulanyjy ýazmagy bes edende ýerine ýetirilmeli gymmat bir işlemiňiz bolsa, peýdalydyr. Bu ýazgyda, useEffect-i Next.js-de gymmat işlemleri debounce etmek üçin nähili ulanmagyny görkezdim.

Eger bu ýazgy siziň üçin peýdaly bolsa, JavaScript Hashmap, Ýokary Ýerine Ýetirilişli we Sadaly-a hem göz atip bilersiňiz.