react缓存listener写法求教

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

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

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

    //....一些代码
}
阅读 819
1 个回答

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

import { useRef } from 'react';

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

  return ref;
}

export default useLatest;
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题