526互联

React 18 useEffect 代码执行两次的问题

发布时间 2023-10-01 16:52:07作者: zjy4fun

https://github.com/zjy4fun/notes/issues/62

 

React 18 提出的新特性“并发渲染”，为了防止组件重复挂载的问题，React 在开发模式 && 严格模式下，useEffect 会执行两次（模拟组件挂载和组件卸载，让问题提早暴露），但是线上模式不会。

开发模式下，可以通过设置标志位防止 useEffect 执行多次

  let ignore = useRef(false)
  
  useEffect(() => {
    if(ignore.current) {
      return
    }
    setTimer(setInterval(() => {
      setCount(count => count + 1)
    }, 1000))
    ignore.current = true
    return () => {
      clearInterval(timer)
    }
  }, [])

也许有更好的方法，暂时先这样解决了。。。