Debouncing dengan React Hooks

Hari ini saya akan menunjukkan kepada Anda cara membuat hook useDebounce yang memungkinkan Anda untuk menunda panggilan API secara super-sederhana sehingga tidak sering terjadi.

Saya juga membuat demo yang menggunakan hook kami. Ia mencari Marvel Comics API dan hook useDebounce memungkinkan Anda menghindari panggilan server untuk setiap penekanan tombol.

Cukup elegan, ya? Ok, sekarang mari kita ke kode!

, , . , , , . useEffect, , . useState useEffect, .

import React, { useState, useEffect } from 'react';
import useDebounce from './use-debounce';

// 
function App() {
  //       
  const [searchTerm, setSearchTerm] = useState('');
  //       
  const [results, setResults] = useState([]);
  //     (    API)
  const [isSearching, setIsSearching] = useState(false);

  //     ,    searchTerm.
  //      (  ) ...
  // ...    500ms   .
  //      searchTerm.
  //   ,      ,    
  //           .
  const debouncedSearchTerm = useDebounce(searchTerm, 500);

  //    
  //   useEffect,     
  useEffect(
    () => {
      //       (  -)
      if (debouncedSearchTerm) {
        //   isSearching
        setIsSearching(true);
        //    
        searchCharacters(debouncedSearchTerm).then(results => {
          //    false, -  
          setIsSearching(false);
          //    
          setResults(results);
        });
      } else {
        setResults([]);
      }
    },
    //    useEffect
    //  useEffect       ...
    // ...    ,      ...
    //   searchTerm     500ms.
    [debouncedSearchTerm]
  );

  //   UI     
  return (
    <div>
      <input
        placeholder="Search Marvel Comics"
        onChange={e => setSearchTerm(e.target.value)}
      />

      {isSearching && <div>Searching ...</div>}

      {results.map(result => (
        <div key={result.id}>
          <h4>{result.title}</h4>
          <img
            src={`${result.thumbnail.path}/portrait_incredible.${
              result.thumbnail.extension
            }`}
          />
        </div>
      ))}
    </div>
  );
}

//    
function searchCharacters(search) {
  const apiKey = 'f9dfb1e8d466d36c27850bedd2047687';
  const queryString `apikey=${apiKey}&titleStartsWith=${search}`;
  return fetch(
    `https://gateway.marvel.com/v1/public/comics?${queryString}`,
    {
      method: 'GET'
    }
  )
    .then(r => r.json())
    .then(r => r.data.results)
    .catch(error => {
      console.error(error);
      return [];
    });
}

, ! , .

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

//  
export default function useDebounce(value, delay) {
  //      
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(
    () => {
      //  debouncedValue  value ( ) 
      //   
      const handler = setTimeout(() => {
        setDebouncedValue(value);
      }, delay);

      //   ,     ,  ...
      // ... useEffect  . useEffect   ,   ...
      // ... value   (   ).
      //     debouncedValue,   value ...
      // ...     .
      //     .
      //     :    -  ...
      // ...     ,   ,  debouncedValue...
      // ...     ,      ,  500ms.
      return () => {
        clearTimeout(handler);
      };
    },
    //  ,    
    //       "delay"    ...
    // ...      .
    [value]
  );

  return debouncedValue;
}

Dan di sini dia ada di depan Anda! Kami sekarang memiliki pengait untuk nilai yang ditangguhkan yang dengannya kami dapat menunda perubahan nilai apa pun secara langsung di badan komponen kami. Nilai yang ditangguhkan kemudian dapat ditambahkan ke array dependensi useEffect, alih-alih nilai yang dapat diubah sendiri, untuk membatasi frekuensi panggilan ke efek yang diinginkan.

Berikut ini demo demo Pencarian Marvel Comic di CodeSandbox.

Jika Anda menyukainya, Anda dapat memeriksa dan menilai blog saya tentang React hooks dan pembuat aplikasi Bereaksi.