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

Last updated on May 23, 2022 A Goodman Loading... Post a comment

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:

// pages/index.js
// KindaCode.com

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. Further reading:

You can also check our React topic page and Next.js topic page for the latest tutorials and examples.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

You May Also Like