Question

This question already has answers here:

Why useEffect running twice and how to handle it well in React? (5 answers)

Closed 3 months ago.

dssddssddssddssddssddssddssddssddssddssddssddssddssddssddssddssddssddssddssddssddssddssd

Answer 1

Are you using a <StrictMode>? If yes, then Strict mode has been designed to run effects twice.

Strict mode is for detecting bugs you may have inside your effects but also for detecting other issues with your code that would prevent you to easily upgrade to the next version of React. Your effects should be resilient to it, calling them twice should not cause bugs in your code, even it means your API is called twice. In production, it doesn t do anything, it s a development only tool.

In this case, it s trying to point out you have an issue in your effect that it doesn t have a cleanup phase for example. If the effect has been cleaned up because the dependencies changed or because the component unmounted, you would have an issue (like calling setState on an unmounted component).

Example of cleanup:

useEffect(() => {
  // use local flag
  let cleanup = false

  const process = () => {
    Promise.resolve(true).then(() => {
      // check if cleanup has been run
      if (!cleanup) {
        setState(true)
      }
    })
  }

  process()

  // set the flag
  return () => {
    cleanup = true
  }
}, [])

Answer 2

JakubKotrs said on my post. "StrictMode" has been designed to run effects twice. and when I removed "StrictMode" on my index.js. it runs only once.

友情链接