react-hooks - useRef 或 useCallback 定义在重新渲染时保持不变的函数

Question

我有一个关于在创建一个在所有重新渲染中保持不变的函数时使用哪个钩子的问题。下面我提供了一个简单的例子。

'Submit1' 包含在 useCallback 中，而 'Submit2' 包含在 useRef 中。两者都给出了预期的结果，因为它们可以防止“HelloWorld”组件不必要地重新渲染。在这种情况下，哪种钩子最合适？

import React,{ memo, useCallback, useRef, useState } from 'react';

const HelloWorld = memo(({ submit }: any) => {
  console.log('hi world');
  return <button onClick={submit}>second nutton</button>;
});

export default  () => {
  const [first1, setfirst1] = useState(1);
  const submit1 = useCallback(() => console.log("i am submit1"), []);
  const submit2 = useRef(()=>console.log("i am submit2")).current;

  return (
    <>
      {console.log(1234)}
      <button onClick={() => setfirst1((f) => f + 1)}>first button</button>;
      <HelloWorld submit={submit2} />
    </>
  );
};