Always use
StrictMode
(React)
01
<StrictMode>
React's StrictMode is a powerful tool
for enhancing the quality and
reliability of your applications.
StrictMode applies a set of
development-time checks to help
identify bugs early in the
development process.
In this guide, we'll delve into the why
and how you should use StrictMode.
Along with what it offers.
Why StrictMode
02
In React, components are meant to
be pure functions. Component should
behave the same way as long as its
props/arguments remain the same.
This applies to state as well, state
objects are immutable, and should
only be updated using the setState
function.
These rules make React more
predictable and consistent. Violating
these rules, can cause bugs to seep
into the code.
These bugs are hard to detect as they
may surface in certain scenarios.
StrictMode allows us to detect
common bugs early in development
03
How to Use
StrictMode
Implementing StrictMode is
straightforward. Simply wrap your
components or the entire application
with the <StrictMode> JSX element.
Note: once StrictMode is applied, all
child components will undergo its
checks; you can't selectively omit
components from this process.
<React.StrictMode>
<App />
</React.StrictMode>
04
What does StrictMode
do?
StrictMode works only in the
development environment and enables
the following behavior,
Extra Component Renders:
Components are re-rendered an
additional time to detect impure
rendering, such as direct data
mutation.
Enhanced useEffect Checks:
useEffect callbacks undergo
additional invocations to identify
missing effect cleanup and other
issues.
Deprecated API Warnings
Re-rendering 05
Components
StrictMode will make the following
function calls twice,
Component function
Functions passed to useState,
setState, useMemo, and
useReducer.
Some class methods.
Invoking the function twice helps
identify data mutation issues easily.
Re-rendering 06
Components (contd.)
const count = ["1", "2", "3", "4", "5"];
function App() {
count.push("6"); // Mutating external Without StrictMode
object. Count: 1, 2, 3, 4, 5, 6
return ( With StrictMode
<div style={{ marginLeft: "40px" }}> Count: 1, 2, 3, 4, 5, 6, 6
<p>Count: {count.join(", ")}</p>
</div>
);
}
In this example, you can see that the
data manipulation is clearly visible
when StrictMode is used.
When StrictMode is used, the
component is re-rendered. This is the
reason we see the additional `6` on
the DOM.
Using this we can easily identify that
our component is no longer pure.
07
Invoking useEffect
Callbacks
Each useEffect setup and cleanup
operation is run an extra time.
This helps in pinpointing bugs related
to missing cleanup or incorrect
dependency management.
Invoking useEffect 08
Callbacks (contd)
import { useEffect } from "react";
function App() {
Without StrictMode
useEffect(() => { // Interval is never cleared.
1 Interval registered
setInterval(() => {
console.log("Interval passed");
With StrictMode
}, 1000);
2 Intervals registered
}, []);
return null;
}
In this example, 2 intervals are
registered when StrictMode is
enabled.
This allows us to identify that we are
not clearing the intervals in the
cleanup function which is essential.
09
Summary:
StrictMode is an invaluable feature to
help surface these subtle bugs in your
React component.
Without StrictMode such bugs would
be hard to identify and replicate.
It acts as a guard-rail allowing us to
catch bugs early before the users face
them.
10
References:
React Dev:
https://react.dev/reference/react/StrictMode
