掌握React中的辩论：一种用自定义钩的干净可扩展的方法

import { useState, useEffect } from 'react';

const useDebouncedValue = (inputValue, delay) => {
  const [debouncedValue, setDebouncedValue] = useState(inputValue);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(inputValue);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [inputValue, delay]);

  return debouncedValue;
};

import React, { useState } from 'react';
import useDebouncedValue from './useDebouncedValue'; // 导入自定义钩子

export default function App() {
  const [value, setValue] = useState('');
  const debouncedSearchTerm = useDebouncedValue(value, 500); // 使用防抖值，延迟500毫秒

  // 使用防抖后的值进行API调用或其他操作
  useEffect(() => {
    if (debouncedSearchTerm) {
      // 在这里进行API调用
    }
  }, [debouncedSearchTerm]);

  return (
    <div>
      <input
        type="text"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder="搜索..."
      />
    </div>
  );
}