Mengurangkan Bunyi Bising dalam Next.js

Cara Menggunakan useEffect untuk Mendebounce Prosedur Mahal di Next.js

React v16.8 memperkenalkan hook baru yang disebut useEffect, yang membolehkan anda menjalankan kesan sampingan dalam komponen fungsi anda. useEffect adalah cara terbaik untuk mengendalikan operasi mahal seperti panggilan API, tetapi ia boleh mengambil masa. Dalam catatan ini, saya akan menunjukkan kepada anda bagaimana untuk menggunakan useEffect untuk mendebounce prosedur mahal di Next.js.

Apakah itu debouncing?

Debouncing adalah teknik untuk mengawal kadar di mana fungsi dipanggil. Ia berguna apabila anda mempunyai operasi mahal yang anda ingin jalankan hanya apabila pengguna telah berhenti menaip, contohnya. Dalam kes ini, anda boleh mendebounce panggilan API supaya ia hanya dibuat apabila pengguna telah berhenti menaip selama tempoh tertentu.

useEffect

useEffect adalah hook yang membolehkan anda menjalankan kesan sampingan dalam komponen fungsi anda. Ia serupa dengan componentDidMount dan componentDidUpdate dalam komponen kelas. Argumen pertama adalah fungsi yang dipanggil apabila komponen dipasang atau dikemas kini. Argumen kedua adalah array kebergantungan. Jika kebergantungan berubah, prosedur akan dipanggil semula. Jika array itu kosong, fungsi itu hanya akan dipanggil apabila komponen dipasang.

import React, { useEffect } from 'react'

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

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

  return <div>Hello world</div>
}

Cara mendebounce dalam Next.js

Perkara pertama yang perlu anda lakukan ialah membuat hook tersuai yang akan mengendalikan debouncing. Berikut adalah contoh ringkas:

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 ingin didebounce dan kelewatan dalam milidetik. Ia mengembalikan nilai yang telah didebounce. Hook ini menggunakan useEffect untuk menetapkan jangka masa yang akan mengemas kini nilai yang didebounce selepas kelewatan yang ditentukan. Ia juga menghasilkan fungsi pembersihan yang membersihkan jangka masa jika nilai atau ketidaktentuan berubah.

Sekarang kita telah mendapat hook yang boleh mendebounce nilai, kita boleh menggunakannya untuk mendebounce panggilan API. Berikut adalah contoh:

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 membuat panggilan API ke /api/search setiap kali pengguna berhenti menaip selama 500 milidetik. Debounce akan membuat panggilan API dengan nilai medan input sebagai rentetan pertanyaan.

Prestasi

Debouncing adalah cara yang murah untuk mengendalikan operasi mahal dalam Next.js. Ia lebih murah daripada menggunakan pustaka seperti lodash.debounce kerana ia tidak memerlukan sebarang kebergantungan tambahan. Ia juga lebih murah daripada menggunakan pustaka seperti react-throttle kerana ia tidak memerlukan sebarang kod tambahan untuk dibundel.

Kesimpulan

Debouncing adalah teknik yang berharga untuk mengawal kadar di mana fungsi dipanggil. Ia berguna apabila anda mempunyai operasi mahal yang anda ingin jalankan hanya apabila pengguna telah berhenti menaip. Dalam catatan ini, saya telah menunjukkan kepada anda cara menggunakan useEffect untuk mendebounce operasi mahal dalam Next.js.

Jika anda menikmati catatan ini, anda mungkin juga menyukai JavaScript Hashmap, Performant dan Mudah.