React18 useEffect的新特性

今天在写demo的时候遇到了一个小问题，按照往常来说，使用hooks useEffect只要给其第二个参数为[]即可只执行一次。但在React18里，useEffect却意外的执行了两次。

结果

useEffect的新特性

产生上述的原因是因为在18以后，React 会将每个组件挂载两次进行测试，去测试你的 useEffect 有没有潜在问题。那么我们该如何去解决呢？最简单的方式就是通过ref去解决

解决方式

const firstRenderRef = useRef(true);