【笔记/总结】React Hook实现防抖函数

原视频： Youtube - React Debounce Search Input API Call | useDebounce React Hook
参考：防抖和节流及对应的React Hooks封装

【笔记：防止之后自己忘记，原链接讲的更清楚】

Hooks实现

1. 原理：传入一个待防抖的值，返回一个防抖封装的值
   1. useState定义debouncedValue
   2. useEffect依赖项为value和delay：表示值或者delay时间发生变化时，都会调用callback函数
   3. 每调用一次useEffect函数就会：生成一个新的定时器，并返回清楚函数对上一个定时器进行清除

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

const useDebounce = (value, delay = 500) => {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const id = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(id);
    };
  }, [value, delay]);

  return debouncedValue;
};

export default useDebounce;

用法

1. 将需要防抖的值传入到useDebounce中，获得一个进行了防抖操作的值
2. useEffect的依赖项变成防抖后的值

const [text, setText] = useState("good");
const debouncedText = useDebounce(text, 1000);

useEffect(()=>{
	...
}, [debouncedText])