Penekanan Kebisingan di Next.js

React v16.8 Memperkenalkan useEffect: Cara Mengatur Operasi Mahal di Next.js

React v16.8 memperkenalkan hook baru yang disebut useEffect, yang memungkinkan Anda menjalankan efek samping di komponen fungsional Anda. useEffect adalah cara yang hebat untuk menangani operasi mahal seperti panggilan API, tetapi mungkin membutuhkan beberapa pekerjaan. Dalam postingan ini, saya akan menunjukkan kepada Anda cara menggunakan useEffect untuk men-debounce prosedur mahal di Next.js.

Apa itu Debouncing?

Debouncing adalah teknik untuk mengontrol kecepatan pemanggilan suatu fungsi. Ini berguna ketika Anda memiliki operasi mahal yang hanya ingin Anda jalankan saat pengguna berhenti mengetik, misalnya. Dalam hal ini, Anda dapat men-debounce panggilan API sehingga hanya dilakukan saat pengguna berhenti mengetik untuk jangka waktu tertentu.

useEffect

useEffect adalah hook yang memungkinkan Anda menjalankan efek samping di komponen fungsional Anda. Ini mirip dengan componentDidMount dan componentDidUpdate di komponen kelas. Argumen pertama adalah fungsi yang dipanggil saat komponen dipasang atau diperbarui. Argumen kedua adalah array dependensi. Jika dependensi berubah, prosedur akan dipanggil lagi. Jika array kosong, fungsi hanya akan dipanggil saat komponen dipasang.

import React, { useEffect } from 'react'

const MyComponent = () => {
  useEffect(() => {
    console.log('Ini akan dipanggil saat komponen dipasang')
  }, [])

  useEffect(() => {
    console.log('Ini akan dipanggil saat komponen dipasang dan ketika dependensi berubah')
  }, [dependency1, dependency2])

  return <div>Halo dunia</div>
}

Cara Men-debounce di Next.js

Hal pertama yang perlu Anda lakukan adalah membuat hook kustom yang akan menangani debouncing. Berikut adalah contoh sederhana:

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
}

Hook ini mengambil dua argumen: nilai yang akan di-debounce dan penundaan dalam milidetik. Hook ini mengembalikan nilai yang di-debounce. Hook ini menggunakan useEffect untuk mengatur timeout yang akan memperbarui nilai yang di-debounce setelah penundaan yang ditentukan. Hook ini juga mengembalikan fungsi pembersihan yang membersihkan timeout jika nilai atau dependensi berubah.

Sekarang setelah kita memiliki hook yang dapat men-debounce nilai, kita dapat menggunakannya untuk men-debounce panggilan API. Berikut adalah contohnya:

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

Komponen ini akan melakukan panggilan API ke /api/search setiap kali pengguna berhenti mengetik selama 500 milidetik. Debounce akan melakukan panggilan API dengan nilai dari bidang input sebagai string kueri.

Performa

Debouncing adalah cara yang murah untuk menangani operasi mahal di Next.js. Ini lebih murah daripada menggunakan library seperti lodash.debounce karena tidak memerlukan dependensi tambahan. Ini juga lebih murah daripada menggunakan library seperti react-throttle karena tidak memerlukan kode tambahan untuk dibundel.

Kesimpulan

Debouncing adalah teknik yang berharga untuk mengontrol kecepatan pemanggilan fungsi. Ini berguna ketika Anda memiliki operasi mahal yang hanya ingin Anda jalankan saat pengguna berhenti mengetik. Dalam postingan ini, saya telah menunjukkan kepada Anda cara menggunakan useEffect untuk men-debounce operasi mahal di Next.js.

Jika Anda menikmati postingan ini, Anda mungkin juga menyukai JavaScript Hashmap, Performant dan Sederhana.