Strict Mode in React
StrictMode
is a tool for highlighting potential problems in an application. Like Fragment
, StrictMode
does not render any visible UI. It activates additional checks and warnings for its descendants.
Note: Strict mode checks are run in development mode only; they do not impact the production build.
HOW TO DO IT –
import React from 'react';
function ExampleApplication() {
return (
<div>
<Header />
<React.StrictMode>
<div>
<ComponentOne />
<ComponentTwo />
</div>
</React.StrictMode>
<Footer />
</div>
);
}
In the above example, strict mode checks will not be run against the Header
and Footer
components. However, ComponentOne
and ComponentTwo
, as well as all of their descendants, will have the checks.
StrictMode
currently helps with:
- Identifying components with unsafe lifecycles
- Warning about legacy string ref API usage
- Warning about deprecated findDOMNode usage
- Detecting unexpected side effects
- Detecting legacy context API
How I used this knowledge to solve a bug at Uber – BaseUI (Open Source 😉 ) –

So this is all the code I needed to write!


That’s the way to do it!
Written with love,
Rishabh Budhiraja