---
title: "Double Component Loads in React with React Router"
date: 2024-01-04T15:43:46.000Z
author: Z.SHINCHVEN
tags: [react, React Router, React StrictMode]
canonical: https://atlassc.net/2024/01/05/double-component-loads-in-react-with-react-router
---
## The Problem

Recently, I encountered a perplexing issue while working with `React Router` in my React application — my components were loading twice every time I navigated to a new route. This behavior was puzzling and seemed to defy the expected behavior of a single component mount per route change. After some investigation and troubleshooting, I've resolved the issue and wanted to share my findings with the community.

## The Usual Suspects

ChatGPT told me that there are several reasons why components might load more than once in React. I've listed them below for reference:

1. **Incorrect Route Configuration**: Overlapping paths or improperly nested routes can lead to multiple component mounts.
2. **StrictMode**: React's `StrictMode` can lead to intentional double invocation of certain lifecycle methods in development mode to help detect side effects.
3. **Multiple Router Instances**: Using more than one `<BrowserRouter>` or `<Router>` instance can reset router state and cause re-mounts.
4. **Code Splitting and Lazy Loading**: Components may re-render due to state changes if `React.lazy` and `Suspense` are used for code splitting and lazy loading.
5. **Misuse of the `key` Prop**: Incorrect use of the `key` prop on route components can trigger re-mounts on route changes.
6. **State Management Issues**: Misconfigurations with state management libraries like Redux or MobX can lead to multiple renders.
7. **Hot Reloading**: During development, module updates with hot reloading can cause components to reload.

## Resolving the Issue

To resolve the issue, you can take the following steps:

- Confirm that your route configuration is correct and contains no duplicates.
- Understand that `StrictMode` will cause additional renders only in development and verify that this is the behavior you're observing.
- Ensure you're using only one instance of `<Router>` in your application.
- If using code splitting, check that `React.lazy` and `Suspense` are implemented correctly and not causing unnecessary re-renders.
- Review your use of the `key` prop to make sure it's not causing components to remount unnecessarily on route changes.

## The Culprit: React.StrictMode

In my case, the culprit was `React.StrictMode`. This tool is designed for detecting potential issues, but it has a side effect of double rendering components to identify problems with your code that will not adhere to the strict mode policies.

Here's what you need to know about `StrictMode`:

- It only affects the development build, not the production build.
- It helps identify components with unsafe lifecycles, legacy string ref API usage, deprecated findDOMNode usage, and unexpected side effects.
- It intentionally doubles the invocation of the following functions: constructor, render, shouldComponentUpdate, and the various lifecycle methods.

**I just removed `StrictMode` from my application and the double rendering stopped.**

## Conclusion

After identifying `StrictMode` as the reason for the double loading of my components, I decided to keep it in place during development to benefit from its checks and warnings. However, it's important to remember that this behavior won't occur in a production build, so there's no impact on end-users.

I hope this exploration helps others who might be facing similar issues. Remember, tools like `React.StrictMode` are there to assist us, but knowing when and how they affect your development process is key to using them effectively.

Happy coding!