React StrictMode
What is React StrictMode and how to use it
You can use the React.StrictMode
built-in component to enable a set of checks that React performs and warns you about.
An easy way is to wrap the entire App component in <React.StrictMode></React.StrictMode>
in the index.js file:
import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>
document.getElementById('root')
You can also use it by wrapping one or more components of your app:
import React from 'react'
class Hello extends React.Component {
render() {
return (
<div>
<React.StrictMode>
...
</React.StrictMode>
<div>
)
}
}
One of the main use cases of this component is to be used as an automated best practices, potential problems and deprecations check.
It can’t catch all, but you have lots of nice checks here that can help you fix the low-hanging fruits.
Introduced in React 16.3 in March 2018, it has zero impact in production, so you can always leave the component in the codebase. Used in development it will print useful warnings in the browser JavaScript console.
Here is how can I help you:
- COURSES where I teach everything I know
- THE VALLEY OF CODE your web development manual
- BOOTCAMP 2024 cohort in progress, next edition in 2025
- BOOKS 16 coding ebooks you can download for free on JS Python C PHP and lots more
- SOLO LAB everything I know about running a lifestyle business as a solopreneur
- Interesting links collection
- Follow me on X