why do react components render twice or double or multiple times

intro

Yes! I can imagine how frustrating it can be huh?

i understand You just started your new react app, or you have been working on a project for a while, and have noticed the unpleasant double rendering of your react components which affects especially the useEffect hook(where most devs write their effects right?), firing functions, API calls, and other tasks twice each time the app loads.

Now you have searched through your code for possible causes but can't find it? well, I think I have an explanation for that. so without any further ado let's get started. lets start

React Strict Mode

That's him😀! the hidden trouble maker. The latest version of React.js is v18.2.0, and these latest versions(from v18.0.0 to the most recent) come with some updates that seem controversial to many developers while more appropriate to others

One of these updates is the StrictMode, which from the docs :

is a tool for highlighting potential problems in an application.

This just means that it's a tool that helps in writing better code for better applications.

The mechanism by which your components are rendered twice is as thus:

On render, the component will make the first mount.
Then react will unmount to make checks on how your code handles unmounts which is very useful for cases where you have subscriptions to APIs that need to be cleaned up to avoid memory leakage and other performance issues.
And finally, the component is mounted a second time.

Should you try walkarounds?

walkaround Well, it's really an 'it depends' kind of a thing. I personally think the react strict mode makes for better code writing and improved software development practices, even as I won't deny the fact that I felt like it impacted my development experience in the beginning. You might want to disable the strict mode if you are working on a more trivial project or some project where you value the development experience more and just want to get something done.

How to disable strict mode

if you decide to disable the strict mode in your project, it's quite easy. If you bootstrapped your project with the create-react-app command then in the index.js file you will most likely find a React.StrictMode component wrapping your App component. You can just delete the component's open and close tags and voila.

On State

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  // react strict mode is on by default, so we need to turn it off
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Off State

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  // now react strict mode is off
    <App />
);

Better Alternative

Now that you know how to stop the until now unexpected rerendering of your components in react, let me talk you into why you would be better off leaving it on.

Actually, as devs and builders of the future, it is our responsibility to write sustainable, efficient, and maintainable code in order to develop more robust software. That should be our priority and that is where react's StrictMode comes in place, to help us write better and more performant code.

conclusion

conclusion now I hope you know why you had those double logs in your console. Or those double API calls that you didn't expect, but now there remains a question:

"how do I stop my expensive functions from running twice without disabling strict mode?"

I think I will make that the topic for my next article so please leave a comment if you are interested or awaiting. and now, let me wish you a great day, and to the next article, happy coding!

happy coding

why do your react components render twice?

Comments (4)

More from this blog

How I solved My problem of accessing my react app from my local environment on my phone.

A general overview of the DNS

An overview of React Query.

You probably haven't understood react useEffect yet.

Redux, Redux Toolkit, or React-redux? which should I learn?

intro

React Strict Mode

Should you try walkarounds?

How to disable strict mode

Better Alternative

conclusion

Command Palette

Comments (4)

More from this blog

intro

React Strict Mode

Should you try walkarounds?

How to disable strict mode

Better Alternative

conclusion