Strict Mode in ReactJS
If you are familiar with the create-react-app, there is a mechanism called StrictMode that came into the table with its recent releases (since React 16.3 to be precise). According to the ReactJS official documentation, the StrictMode is a tool for highlighting potential problems in an application. It’ll help to do additional checks and prompts warnings when necessary. Basically, it’s a tool designed to help developers to find potential problems in the ReactJS applications.
If you open up your index.js file in your ReactJS project, if you created your project using create-react-app, chances are high to have a code section like below:
By default, since your App component is wrapped by StrictMode, all of your child components too will be affected by it. This means, any other descendants including the App component itself, will be checked for potential problems and prompted with warnings when necessary.
You can also use StrictMode to check not the complete app, but only some selected parts of the application. In the below example, only the component is wrapped by the React.StrictMode will be checked for errors and come up with warnings if there is any.
So it’s a great way of finding out some issues you accidentally do during the development process and it’ll currently help you with:
- Identifying unsafe lifecycles
- Warning about legacy string ref API usage
- Warning about deprecated findDOMNode usage
- Detecting unexpected side effects
- Detecting legacy context API
But the main purpose of this article is not to highlight these, instead, I want to highlight one thing you might also face during developing your ReactJS app, especially when you are using state hooks like useState and useEffect. Sometimes, because of these StrictMode checks, your components will lead to mounting twice which makes you think there is something wrong with your code and spend hours going here and there in the codebase. Even for experienced developers, this is a bit tricky to identify at the first glance even though it is clearly mentioned in the official documentation. StackOverflow questions, discussions and various blog posts related to this will prove that as well.
This will become worse if you have an API call to fetch data inside your useEffect hook which leads to call twice!
As you can see, sometimes, your response will print twice which definitely make you think there is an issue with your code and definitely it’s worth investigating since unnecessary calls to the server is a bad practice. Luckily, this will only happen in the development mode and not in the production mode.
As mentioned in the ReactJS official documentation:
Strict mode checks are run in development mode only; they do not impact the production build
So you don’t have to worry too much and try to spend hours or maybe days fixing this kind of thing. I’ve learnt this the hard way and because of that, I wanted to share this with you to avoid unnecessary time waste. Hope you enjoyed it!
Thanks 🙏 for reading this and feel free to share this with your colleagues. If you have any question, I’d love to answer those 😊
