1 min read

Fix React Strict Mode renders twice in development

Sometimes, we want to run a snippet just once, even in development.

Share via

Posted by

Posted on

Updated on

If React Strict Mode in development gets you into trouble in some cases, for example, you need a specific action to run only just once, but also don't want to lose the benefits of running the app in Strict Mode, I'll show you a way out!

First, you may need to check whether the environment your app is running on, like so:

tsx


process.env.NODE_ENV === 'development'

We need an indicator to determine which environment are we running on.

Then, in your component, create a counter state that helps us to detect which nth time that the component is rendered.

tsx


const [counter, setCounter] = useState(0);

Add a counter state into the component

Next, use useEffect clean up function to increase the counter!

tsx


  useEffect(() => {
    return () => setCounter((c) => c + 1);
  }, []);

Increase the counter in the clean-up function of useEffect

Add a variable to check if we should do something, like so:

tsx


const shouldRunSomething = process.env.NODE_ENV === 'development' ? counter === 1 : true;

A variable to check if we should run the code

In this case, in development mode, the component always run twice, so we will run that code in the second time of component running.

For production, we don't have to check this counter.

Finally, use that variable to check if we should run or do something.

tsx


  useEffect(() => {
    if (shouldRunSomething ) {
      // TO-DO
    }
  }, [shouldRunSomething]);

Use shouldRunSomething to only run the code in the second time.

To sum up, here's the full snippet:

tsx


const [counter, setCounter] = useState(0);

const shouldRunSomething = process.env.NODE_ENV === 'development' ? counter === 1 : true;

useEffect(() => {
    return () => setCounter((c) => c + 1);
}, []);

useEffect(() => {
    if (shouldRunSomething) {
      // TO-DO
    }
}, [shouldRunSomething]);

The complete snippet

Hope this helps! Let me now if you have any comment.

Comments (0)

Share via

Posted by

TThức Trần

Posted on

Updated on