Next.js-də hesablama xərclərini azaltmağın effektiv yolları

React-da Debouncing: useEffect ilə Next.js-də Bahalı Əməliyyatları İdarə Etmək

React v16.8-də funksional komponentlərdə yan təsirləri işə salmaq üçün useEffect adlı yeni bir hook təqdim edildi. useEffect, API çağırışları kimi bahalı əməliyyatları idarə etmək üçün əla bir yoldur, lakin bəzi işlər tələb edə bilər. Bu yazıda sizə Next.js-də bahalı prosedurları debounce etmək üçün useEffect-dən necə istifadə edəcəyinizi göstərəcəyəm.

Debouncing nədir?

Debouncing, bir funksiyanın çağırılma sürətini nəzarət etmək üçün istifadə olunan bir texnikadır. Məsələn, istifadəçi yazmağı dayandırdıqda yalnız işlətmək istədiyiniz bahalı bir əməliyyatınız olduqda faydalıdır. Bu halda, istifadəçi müəyyən bir müddət ərzində yazmağı dayandırdıqda yalnız ediləcək şəkildə API çağırışını debounce edə bilərsiniz.

useEffect

useEffect, funksional komponentlərdə yan təsirləri işə salmağa imkan verən bir hook-dur. Sinif komponentlərindəki componentDidMount və componentDidUpdate-a bənzəyir. Birinci arqument, komponent montaj olunanda və ya yeniləndikdə çağırılan bir funksiyadır. İkinci arqument asılılıqların bir massiviydir. Asılılıqlar dəyişərsə, prosedurun yenidən çağırılması təmin ediləcəkdir. Massiv boşdursa, funksiya yalnız komponent montaj olunanda çağırılır.

import React, { useEffect } from 'react'

const MyComponent = () => {
  useEffect(() => {
    console.log('Bu komponent montaj olunanda çağırılacaq')
  }, [])

  useEffect(() => {
    console.log('Bu komponent montaj olunanda və asılılıqlar dəyişdikdə çağırılacaq')
  }, [dependency1, dependency2])

  return <div>Salam dünya</div>
}

Next.js-də debounce necə edilir?

İlk olaraq debounce-u idarə edəcək xüsusi bir hook yaratmalısınız. Budur sadə bir nümunə:

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
}

Bu hook iki arqument alır: debounce ediləcək dəyər və milisaniyələrlə gecikdir. Debounce edilmiş dəyəri qaytarır. Hook, useEffect-dən istifadə edərək, göstərilən gecikdirmadan sonra debounce edilmiş dəyəri yeniləyəcək bir zaman ayırır. Ayrıca, dəyər və ya müəyyənlik dəyişərsə zaman ayırmasını təmizləyən bir təmizləmə funksiyası da yaradır.

İndi dəyərləri debounce edə bilən bir hook-umuz olduğundan, onu API çağırışlarını debounce etmək üçün istifadə edə bilərik. Budur bir nümunə:

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

Bu komponent, istifadəçi 500 milisaniyə ərzində yazmağı dayandırdıqda /api/search-ə API çağırışı edəcəkdir. Debounce, sorğu simgecəsinə giriş sahəsinin dəyərini göndərərək API çağırışı edəcəkdir.

Performans

Debouncing, Next.js-də bahalı əməliyyatları idarə etmək üçün ucuz bir yoldur. lodash.debounce kimi bir kitabxana istifadə etməkdən daha ucuzdur, çünki əlavə asılılıq tələb etmir. react-throttle kimi bir kitabxana istifadə etməkdən də daha sərfəlidir, çünki əlavə kodun toplanmasını tələb etmir.

Nəticə

Debouncing, bir funksiyanın çağırılma sürətini nəzarət etmək üçün qiymətli bir texnikadır. İstifadəçi yazmağı dayandırdıqda yalnız işlətmək istədiyiniz bahalı bir əməliyyatınız olduqda faydalıdır. Bu yazıda sizə Next.js-də bahalı əməliyyatları debounce etmək üçün useEffect-dən necə istifadə edəcəyinizi göstərdim.

Bu yazını bəyəndinizsə, JavaScript Hashmap, Performant və Sadə məqaləsini də bəyənə bilərsiniz.