Next.js: How to Disable/Enable React Strict Mode

React Strict Mode is a tool that runs in development mode only. It checks and highlights potential issues in your application, such as unsafe lifecycles, legacy API usage, etc. In Next.js, React Strick Mode is turned on by default for the whole application. This is useful, but sometimes you may feel it is a little annoying (such as some repetitive warnings that overflow and mess up your console).

You can disable or enable React Strict Mode by opening your next.config.js file and setting the reactStrictMode option to false or true, respectively:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false, // React Strict Mode is off
}

module.exports = nextConfig

You can use React Strict Mode for a few individual components or pages by wrapping them with <React.StrictMode> and </React.StrictMode>, like this:

// Sling Academy
// pages/index.js

export default function Home(props) {
  return <div style={{ padding: 30 }}>
    <div>
      <Header />
      <React.StrictMode>
        <div>
          <ExampleComponent />
          <DummyComponent />
        </div>
      </React.StrictMode>
      <Footer />
    </div>
  </div>
}

You can find more detailed information about React Strict Mode in its official docs.

Hope this helps. Happy coding and have a nice day!