react缓存listener写法求教

Question

我的组件会要求传入一个onChange,
但是我不希望每次onChange变化的时候都会触发useEffect,
却又希望在useEffect触发的时候使用的是最新的onChange,
于是有了下面写法，不知道这么写对不对，没见人这么写过

const Component = ({onChange})=>{
    const onChangeRef = useRef(onChange);
    onChangeRef.current = onChange;
    
    const [state, setState] = useState();

    useEffect(()=>{
        onChangeRef.current();
    },[state]);

    //....一些代码
}

Answer 1

没错，实际上你用的是 useLatest hook

import { useRef } from 'react';

function useLatest<T>(value: T) {
  const ref = useRef(value);
  ref.current = value;

  return ref;
}

export default useLatest;