我正在尝试创建一个React钩子，它返回一个钩子的用户将调用的函数。钩子在钩子内部创建一个函数。
这里有一个最小的例子

// fetch.js

import { useEffect, useState} from "react";

export const useFetch = () => {
  
  const [fn, setFn] = useState(null);

  useEffect(() => {
    const fn_ = () => console.log("test")
    setFn(fn_)
  }, []);

  return fn;
}

// App.js

import { useFetch } from './fetch';

function App() {
  const fn = useFetch()
  
  return (
    <div className="App">
      hello
    </div>
  );
}

我也禁用了严格模式。

// index.js

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);

虽然我没有调用fn()，但我看到它正在执行并输出控制台日志。

你知道为什么会这样吗？我很确定我做错了什么，但不知道是什么。
编辑：
感谢您在下面的回答。在React FAQ中找到了解释https://react.dev/reference/react/useState#im-trying-to-set-state-to-a-function-but-it-gets-called-instead