Skip to content

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's my latest YouTube video

→ Get my React Beginner's Handbook

→ I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter

JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025

Bootcamp 2025

Join the waiting list