React hooks 优化自定义响应钩子-数据获取

我对React钩子非常陌生，我知道我可以在函数组件中使用React钩子。我习惯用Redux代替hook。我想要实现的是代码重用，就像Redux一样，您可以将操作存储在1个文件中并导出它们，然后在许多基于类的组件中使用它们。例如，在许多组件中，我需要有一个可用部门的列表，我可以通过启动操作轻松获得该列表，然后在还原器/存储中读取结果

回到现实，在Hooks世界中，我可以在每个功能组件中使用useState、useffect等，但这在代码重用方面是非常糟糕的做法。因此，我尝试创建一个自定义钩子，在这里我只调用钩子，我得到了结果，组件可以刷新

因此，通过这个简单的create react应用程序，我在hooks.js文件中保存了一个自定义挂钩，如下所示：

export const useGW = (pcode) => {
    const [response, setResponse] = useState({});
    console.log("useGW()");
    useEffect(() => {
        async function fetchGW() {
            console.log("fetchGW()");
            var options = {
                method: 'GET',
                headers: { 'content-type': 'application/json', "XSP": pcode },
                url: '=====EDITED======'
            };
            let res = await axios(options)
            setResponse(res.data);
        }
        fetchGW();
    },[])
    return response
}

从App.js中，我只需导入并调用它：

function App() {
  const response = useGW('dev');
  console.log('oGW : ', response);

问题是，它打印出：

• useGW（）
• oGW:{空对象}
• useGW（）
• oGW:{空对象}
• fetchGW（）
• oGW:{响应正确}
• useGW（）
• oGW:{响应正确}

我不明白为什么它的效率如此之低，以至于它重新渲染了4x？ 我如何使它高效？ 我尝试过使用useffect的[]，但重新渲染的数量是相同的

---

在advanced（高级）

“我习惯于使用Redux而不是Hooks”中感谢您-Hooks不是Redux的替代品，额外的渲染很可能是因为Hi-Yousaf，非常感谢您的回复。如果我关闭StrictMode，似乎真的解决了问题。它输出：-useGW（）-oGW:{empty object}-fetchGW（）-useGW（）-oGW:{正确响应}。你救了我一天！谢谢