Mengurangkan beban pelayan dengan menggunakan teknik debouncing/throttle dalam reactjs

Melantun dan Mendikit dalam React.js

Menyahlantun dan pendikit ialah teknik yang digunakan untuk mengoptimumkan prestasi dengan mengawal kekerapan pelaksanaan fungsi sebagai tindak balas kepada peristiwa yang kerap (cth., menaip, menatal, mengubah saiz).

---

1. Apa itu Debouncing?

Menyahlantun menangguhkan pelaksanaan fungsi sehingga selepas tempoh masa tertentu berlalu sejak kali terakhir ia digunakan.

Contoh Kes Penggunaan:

• Medan input carian: Elakkan daripada mencetuskan panggilan API pada setiap ketukan kekunci.

Contoh Melantun dalam React

import React, { useState, useEffect } from 'react';

const DebouncedSearch = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [debouncedValue, setDebouncedValue] = useState('');

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(searchTerm);
    }, 500); // Delay of 500ms

    return () => {
      clearTimeout(handler); // Cleanup on input change
    };
  }, [searchTerm]);

  useEffect(() => {
    if (debouncedValue) {
      console.log('API Call with:', debouncedValue);
      // Make API call here
    }
  }, [debouncedValue]);

  return (
    <input type="text" placeholder="Search..." value="{searchTerm}" onchange="{(e)"> setSearchTerm(e.target.value)}
    />
  );
};

export default DebouncedSearch;

---

2. Apakah Pendikit?

Pendikitan memastikan bahawa fungsi dilaksanakan paling banyak sekali dalam selang masa tertentu, tidak kira berapa kali ia dicetuskan semasa selang itu.

Contoh Kes Penggunaan:

• Acara tatal: Hadkan kekerapan fungsi yang dicetuskan semasa acara tatal untuk meningkatkan prestasi.

Contoh Pendikit dalam React

import React, { useEffect } from 'react';

const ThrottledScroll = () => {
  useEffect(() => {
    const handleScroll = throttle(() => {
      console.log('Scroll event fired');
    }, 1000); // Execute at most once every 1000ms

    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return <div>




<hr>

<h3>
  
  
  <strong>3. Using Libraries (Optional)</strong>
</h3>

<p>Instead of implementing custom debounce/throttle, you can use popular libraries like:</p>

<h4>
  
  
  <strong>Lodash</strong>
</h4>

<p>Install:<br>
</p>

<pre class="brush:php;toolbar:false">npm install lodash

Penggunaan:

import { debounce, throttle } from 'lodash';

// Debounce Example
const debouncedFunc = debounce(() => console.log('Debounced!'), 500);

// Throttle Example
const throttledFunc = throttle(() => console.log('Throttled!'), 1000);

Penggunaan tindak balas

Pasang:

npm install react-use

Penggunaan:

import { useDebounce, useThrottle } from 'react-use';

const Demo = () => {
  const [value, setValue] = useState('');
  const debouncedValue = useDebounce(value, 500);
  const throttledValue = useThrottle(value, 1000);

  useEffect(() => {
    console.log('Debounced:', debouncedValue);
    console.log('Throttled:', throttledValue);
  }, [debouncedValue, throttledValue]);

  return (
    <input value="{value}" onchange="{(e)"> setValue(e.target.value)}
      placeholder="Type something..."
    />
  );
};

export default Demo;

---

Perbezaan Utama

Feature	Debouncing	Throttling
Execution	Executes once after the user stops firing events for a specified time.	Executes at regular intervals during the event.
Use Cases	Search input, resizing, form validation.	Scroll events, button clicks, API polling.
Performance	Reduces the number of function calls.	Limits execution to once per interval.

Ciri

---

Melantun

Pendikit Pelaksanaan

Melaksanakan sekali selepas pengguna berhenti menembak acara untuk masa tertentu. Melaksanakan pada selang masa yang tetap semasa acara.

Kes Penggunaan

Input carian, ubah saiz, pengesahan borang. Tatal acara, klik butang, tinjauan API. Prestasi Mengurangkan bilangan panggilan fungsi. Menghadkan pelaksanaan kepada sekali setiap selang.

Bila Penggunaan