react 18中的严格模式

发表于 更新于 阅读次数：
最近的项目中使用了react 18，在开发中发现useEffect会被运行两次……

问题

最近的项目中使用了react 18，下面的代码在code发生变化时会请求两次：

1
2
3
4
const { code } = useParams()
useEffect(() => {
  authByCode(code)
}, [code])

这里的authByCode每个code只能使用一次，第二次使用的时候会报错，所以才发现了会运行两次的问题。

前因后果

网上搜了下，发现react官方早有文档说明了这种情况，甚至还分为了useMemo和useEffect分别介绍。

出现运行两次的原因是React 18有一个Breaking Change：使组件在卸载后保留状态，这样当组件重新挂载回时可以更快速的响应。

为了测试保留状态是否能正常工作，又可以更好的保持组件纯净，React 18在开发时打开严格模式后，组件在加载时，会改为加载-卸载-重新加载。

解决

回到最开始的问题，官方建议的给网络请求加上cleanup的方法其实是没用的。我们的问题是发生在服务端而不是客户端。

这里可以听取react维护者的建议，使用客户端缓存，比如react-query。