标签: react-usecallback

我正在研究 React 项目，并且正在研究一些库。我发现他们使用的“useCallback”与我使用的不同。下面是代码部分。我仍然认为这段代码与直接使用“useCallback”没有什么区别

// Saves incoming handler to the ref in order to avoid "useCallback hell"
export function useEventCallback<T, K>(handler?: (value: T, event: K) => void): (value: T, event: K) => void {
  const callbackRef = useRef(handler);

  useEffect(() => {
    callbackRef.current = handler;
  });

  return useCallback((value: T, event: K) => callbackRef.current && callbackRef.current(value, event), []);
}

所以我的问题是“useCallback hell”是什么意思？这样使用“useCallback”有什么好处？

// 顺便说一句：我在 React 文档中找到了类似的示例。但我仍然无法理解 https://en.reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback

我正在开发一个相对较大的 React 代码库，并且我看到以前的开发人员使用memo并usecallback自由地认为通过使用这些代码可以提高性能。显然不是，这是一个例子

export default function QuestionHelper({ text }: { text: string }) {
  const [show, setShow] = useState<boolean>(false);

  const open = useCallback(() => setShow(true), [setShow]);
  const close = useCallback(() => setShow(false), [setShow]);

  return (
    <span style={{ marginLeft: 4 }}>
      <Tooltip show={show} text={text}>
        <QuestionWrapper
          onClick={open}
          onMouseEnter={open}
          onMouseLeave={close}
        >
          <Question size={16} />
        </QuestionWrapper>
      </Tooltip>
    </span>
  );
}

该应用程序现在可以运行。但我拒绝修复它，因为该应用程序按预期工作。我怎样才能证明我们应该删除代码中所有不必要的memo和？usecallback

是否有客观的方法来说明删除这些内容的好处？