useEffect 清理函数

Question

I use the Usage Effect to implement cancellation. Accordingly, there is a delay, which is carried out in debounce. The use effect, as I understand it, makes the information leak and an empty function. How to make it so that if there is no "cost" State, then the function will not work and there will be no warning

Mistake:Warning: It is not possible to update the reaction state for the unmounted component. This is not an operation, but it indicates a memory leak in your application. To fix this, cancel all subscriptions and asynchronous tasks in the usage effect cleanup function.

Code:

    function useDebounce(value,fn, delay) {
      useEffect(() => {
          const handler = setTimeout(() => { fn() }, delay);
          return () => {  clearTimeout(handler) };
        },[value]);
    }

Answer 1

You can create a mounted check.

function useDebounce(value,fn, delay) {
  useEffect(() => {
    let mounted = true;
    const handler = setTimeout(() => {
       if (mounted) fn();
    }, delay);
    return () => {
      mounted = false;
      clearTimeout(handler);
    };
  },[value]);
}