Блог

Я пишу useDebounce утилитарный крючок.

 function debounce(fn, delay) {
  let timer = 0;
  return (...args) => {    
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn(...args);
    }, delay);
  };
}

function useDebounce(fn, delay) {
  const ref = React.useRef(fn);

  React.useLayoutEffect(() => {
    ref.current = fn;
  }, [fn]);

  return useMemo(() => debounce(ref.current, delay), [delay]);
}

 

Я использую ref для хранения обратного вызова и его обновления useLayoutEffect , чтобы пользователям API не нужно было запоминать свой собственный обратный вызов. А также я хотел заранее ответить, что я знаю, как useMemo это работает, и я знаю, что вы можете запомнить обратный вызов, т. Е. fn переданный useDebounce извне, но я не хочу, чтобы это ложилось бременем на пользователей API, поэтому я сделал это сам.

Вот живая демонстрация: https://codesandbox.io/s/closure-bug-xcvyd?file=/src/App.js

Теперь функция, которую я хочу осудить, это

   const increment = () => {
    console.log(count);
    setCount(count   1);
  };
 

поэтому я просто передал его, useDebounce но, похоже, функция закончилась устаревшим закрытием count , потому что она обновляется только count из 0 ->> 1 , а затем после этого, независимо от того, сколько раз вы нажимаете на кнопку, она больше не обновляется.

Да, я знаю, что могу написать setCount(c => c 1); , чтобы обойти эту проблему.

Но что меня озадачило, так это то, что если я перепишу useMemo(() => debounce(ref.current, delay), [delay]); return useMemo(() => debounce((...args) => ref.current(...args), delay), [ delay ]); , то эта проблема будет устранена автоматически.

Кажется, я не могу понять, как (...args) => ref.current(...args) решить эту проблему.

Давайте посмотрим, что происходит шаг за шагом.

• Вы размещаете fn внутри ссылки.
• Вы обновляете ссылку с новым значением
• Вы переходите fn к дебату внутри useMemo , и именно в этом заключается ошибка.

При следующем рендеринге вы снова обновляете ref , но функция запоминания не использует ее вообще. Он запоминает ссылку на самый первый пройденный fn , и это изменится только тогда, когда пользователь вашего крючка изменит задержку.

В фиксированном примере с функцией стрелки происходит вот что:

• Вы размещаете fn внутри ref
• Вы обновляете ссылку с новым значением
• Вы запоминаете функцию, которая закрывается ref , и будете заглядывать в нее при каждом вызове, чтобы она выбирала самое свежее fn значение из ref.

 function useDebounce(fn, delay) {
  // storing function into ref
  const ref = React.useRef(fn);
  
  // updating function after memoization, and on each render when function changed
  React.useLayoutEffect(() => {
    ref.current = fn;
  }, [fn]);

  return useMemo(function() {
    // here you are referencing current `fn`
    // The very first `fn` that was passed into hook
    // ref don't play role here - you are passing `ref.current`
    let fnToDebounce = ref.current 
    return debounce(fnToDebounce, delay)
  }, [delay]);
}

function useDebounce(fn, delay) {
  // storing function into ref
  const ref = React.useRef(fn);
  
  // updating function after memoization, and on each render when function changed
  React.useLayoutEffect(() => {
    ref.current = fn;
  }, [fn]);

  return useMemo(function() {
    // Here  you are closuring reference to `ref` and `fnToDebounce` have no idea what is inside it.
    // When it would be called, it will get ref and only at that point will retrieve `ref.current`, that will be the latest `fn`
    let fnToDebounce = (...args) => ref.current(...args);
    return debounce(fnToDebounce, delay);
  }, [delay]);
}