Next.js'de Gürültü Azaltma

React'ta `useEffect` ile Debouncing

React v16.8 ile gelen useEffect hook'u, fonksiyonel bileşenlerinizde yan etkileri yönetmenizi sağlar. useEffect, API çağrıları gibi pahalı işlemleri ele almak için harika bir yoldur, ancak biraz çalışma gerektirebilir. Bu yazıda, Next.js'de pahalı prosedürleri debounce etmek için useEffect kullanımını göstereceğim.

Debouncing Nedir?

Debouncing, bir fonksiyonun çağrılma hızını kontrol etmek için kullanılan bir tekniktir. Örneğin, kullanıcının yazmayı bıraktığında çalıştırmak istediğiniz pahalı bir işleminiz olduğunda kullanışlıdır. Bu durumda, API çağrısını debounce ederek yalnızca kullanıcı belirli bir süre boyunca yazmayı bıraktığında yapılmasını sağlayabilirsiniz.

useEffect

useEffect, fonksiyonel bileşenlerinizde yan etkileri çalıştırmanıza olanak sağlayan bir hook'tur. Sınıf bileşenlerindeki componentDidMount ve componentDidUpdate'ye benzer. İlk argüman, bileşen bağlandığında veya güncellendiğinde çağrılan bir fonksiyondur. İkinci argüman, bağımlılıklar dizisidir. Bağımlılıklar değiştiğinde prosedür tekrar çağrılacaktır. Dizi boşsa, fonksiyon yalnızca bileşen bağlandığında çağrılacaktır.

import React, { useEffect } from 'react'

const MyComponent = () => {
  useEffect(() => {
    console.log('Bu, bileşen bağlandığında çağrılacaktır')
  }, [])

  useEffect(() => {
    console.log('Bu, bileşen bağlandığında ve bağımlılıklar değiştiğinde çağrılacaktır')
  }, [dependency1, dependency2])

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

Next.js'de Debouncing Nasıl Yapılır?

Yapmanız gereken ilk şey, debouncing'i ele alacak özel bir hook oluşturmaktır. İşte basit bir örnek:

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 argüman alır: debounce edilecek değer ve milisaniye cinsinden gecikme. Debounced değeri döndürür. Hook, belirtilen gecikmeden sonra debounced değeri güncelleyecek bir zamanlayıcı ayarlamak için useEffect kullanır. Ayrıca, değer veya gecikme değiştiğinde zamanlayıcıyı temizleyen bir temizleme fonksiyonu da üretir.

Şimdi değerleri debounce edebilen bir hook'umuz olduğuna göre, bunu API çağrılarını debounce etmek için kullanabiliriz. İşte bir örnek:

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 bileşen, kullanıcı 500 milisaniye boyunca yazmayı bıraktığında /api/search adresine bir API çağrısı yapacaktır. Debounce, API çağrısını girdi alanının değeriyle sorgulanabilir dize olarak yapacaktır.

Performans

Debouncing, Next.js'de pahalı işlemleri ele almak için ucuz bir yoldur. lodash.debounce gibi bir kütüphane kullanmaktan daha ucuzdur çünkü ek bağımlılık gerektirmez. Ayrıca react-throttle gibi bir kütüphane kullanmaktan daha ucuzdur çünkü ek kodun paketlenmesini gerektirmez.

Sonuç

Debouncing, bir fonksiyonun çağrılma hızını kontrol etmek için değerli bir tekniktir. Kullanıcının yazmayı bıraktığında çalıştırmak istediğiniz pahalı bir işleminiz olduğunda kullanışlıdır. Bu yazıda, Next.js'de pahalı işlemleri debounce etmek için useEffect kullanımını gösterdim.

Bu yazıyı beğendiyseniz, JavaScript Hashmap, Performant ve Basit yazısını da beğenebilirsiniz.

React'ta useEffect ile Debouncing