What is Strictmode in React

Published On: 14th Oct, 2023

Read Time: 3 mins

Ever wondered why the console.log() you added in the useEffect runs twice in the development mode? Well, this is because of React's <StrictMode>. Let's see why it behaves like that and how it helps developers.

What is Strictmode

<StrictMode> in React is a component provided by React itself that can highlight the potential bugs in the application during development. To use StrictMode, we just need to wrap our application inside the <StrictMode>. Following is the list of methods that StrictMode uses to highlight the potential bugs in our application.

re-render the components one extra time to find bugs caused by impure rendering.
re-render the useEffect to highlight the missing effect cleanup.
check for the use of any depreciated APIs.

Usage

For entire application

import { createRoot } from "react-dom/client";
import { StrictMode } from "react";

const root = createRoot(document.getElementById("root"));

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

For specific part of the application

import { StrictMode } from "react";

function App() {
  return (
    <>
      <Header />
      <StrictMode>
        <main>
          <Hero />
          <Services />
          <Features />
        </main>
      </StrictMode>
      <Footer />
    </>
  );
}

How its helps

Now, you might be wondering, well here some point that we can take into our consideration

Highlighting Unsafe Lifecycle Methods

React has been evolving over the years, and some lifecycle methods that were once considered standard are now considered unsafe and are likely to be deprecated in future versions of React. StrictMode helps you identify components that use these outdated methods, encouraging you to update your code to use safer alternatives. This is crucial for ensuring the long-term maintainability of your application.
Detecting Unexpected Side Effects

One common source of bugs in React applications is the presence of unexpected side effects during the render phase. React's StrictMode can help you locate these issues and address them promptly, reducing the risk of subtle and hard-to-debug problems in your application.
Identifying Potential Context Issues

React's context API is a powerful tool for sharing data between components. However, it can sometimes lead to unexpected behavior when components don't re-render as expected. StrictMode helps you catch these context-related issues by providing warnings and recommendations, ensuring your components behave as intended.
Warning About Deprecated and Unreliable Features

As React evolves, some features and patterns become deprecated or unreliable. Using StrictMode in your application will help you identify and address the usage of these outdated features, ensuring that your codebase stays current and maintains compatibility with future versions of React.

So, next time you start a new React project or work on an existing one, consider making StrictMode an integral part of your development workflow. Your future self (and your teammates) will thank you for it.

What is Strictmode in React