DEV Community

Iyadchafroud
Iyadchafroud

Posted on

why React StrictMode is important ?

why we need StrictMode in react

In React, it is recommended to write components as **pure functions **because it helps ensure that the component's behavior is predictable and consistent. A pure function is a function that always returns the same output for a given set of inputs, and has no side effects. This makes it easier to test, debug, and reason about the component's behavior.

StrictMode is used to catch potential problems in your code that may cause unexpected behavior. By enabling StrictMode, React will perform additional checks and warnings on your components, such as re-rendering components or executing Effects an extra time, to help identify issues related to impure rendering or missing Effect cleanup.

In summary, writing pure components and using StrictMode helps ensure that your components behave as expected, making it easier to develop, test, and maintain your application.

How to implement StrictMode ?

import React from 'react';

function MyComponent() {
  return (
    <div>
      <h1>My Component</h1>
    </div>
  );
}

function App() {
  return (
    <React.StrictMode>
      <MyComponent />
    </React.StrictMode>
  );
}

export default App;

Enter fullscreen mode Exit fullscreen mode

**what strictMode do with component ?

**

  • Enforcing an extra re-render of components to catch any bugs related to impure rendering.

  • Re-executing Effects one additional time to catch bugs related to missing Effect cleanup.

  • Performing checks for the usage of deprecated APIs to ensure that your code remains up-to-date.

Top comments (0)