React 自定义钩子没有获取新值

Question

I'm still trying to wrap my head around how React Hooks work. In Building this custom Hook, I noticed a peculiar behavior:

const useCustomHook = () => {
  const [value, setValue] = useState('hello');

  useEffect(() => {
    window.addEventListener('scroll', print, false);
    return () => window.removeEventListener('scroll', print, false);
  }, []);

  const print = () => console.log('print value: ', value); // shows updated value when called directly but original value when scrolling

  return [setValue, print];
};

The peculiar behavior is what print outputs to the console. When calling print directly, the value reflects the correct updated value. But when scrolling, print always outputs the original value to the console.

Example usage:

App.js

let counter = 0;

const App = () => {
  const [setValue, print] = useCustomHook();

  return (
    <div style={{ margin: '50px auto 10000px' }}>
      <button onClick={() => setValue(counter++)}>Increment</button>{' '}
      <button onClick={print}>Print</button>
    </div>
  );
};

Steps:

1. Click Increment
2. Click Print -> console: print value: 0
3. Scroll -> console: print value: hello

Notice is step 3, the value is still hello . How can I get the proper value to be printed when scrolling?

Answer 1

You need to remove the dependencies from useEffect .

useEffect(() => {
    window.addEventListener('scroll', print, false);
    return () => window.removeEventListener('scroll', print, false);
  }); // remove the empty array

If you set it to [] , then it will be executed only once.
If you remove it, it will be executed on every update.

Ideally, you want to re-evaluate the code in useEffect only when value changes. You could then add print to the array of dependencies.

const useCustomHook = () => {
  const [value, setValue] = useState(-1);

  // useCallback will re-create the function only if 'value' changes
  const print = useCallback(() => {
      console.log('print value: ', value);
  }, [value]);

  // useEffect will be re-evaluated if 'print' changes
  useEffect(() => {
    window.addEventListener('scroll', print, false);
    return () => window.removeEventListener('scroll', print, false);
  }, [print]);

  return [setValue, print];
};