74

I heard that strict mode helps to write React code in best practices way by throwing warnings for life cycle methods removal.

I read about it from https://medium.com/@baphemot/whats-new-in-react-16-3-d2c9b7b6193b

Is my understanding correct? How effective is strict mode? Is it only for unsafe life cycle methods? If not can I use this feature in functional components?

  import { StrictMode} from “react”;
  class Test extends Component{
        render(
            <StrictMode>
                   //Some other child component which has all lifecycle methods implemented in it
            </StrictMode>
        );
  }
halfer
  • 19,471
  • 17
  • 87
  • 173
Hemadri Dasari
  • 29,321
  • 31
  • 106
  • 146

4 Answers4

133

React's StrictMode is sort of a helper component that will help you write better react components, you can wrap a set of components with <StrictMode /> and it'll basically:

  • Verify that the components inside are following some of the recommended practices and warn you if not in the console.
  • Verify the deprecated methods are not being used, and if they're used strict mode will warn you in the console.
  • Help you prevent some side effects by identifying potential risks.

As the documentation says, strict mode is development oriented so you don't need to worry about it impacting on your production build.

I've found it especially useful to implement strict mode when I'm working on new code bases and I want to see what kind of code/components I'm facing. Also if you're on bug hunting mode, sometimes it's a good idea to wrap with <StrictMode /> the components/blocks of code you think might be the source of the problem.

So yeah, you're in the correct path to understanding strict mode, keep it up, I think it's one of those things you understand better when you play with them, so go ahead and have some fun.

Enmanuel Duran
  • 4,588
  • 2
  • 16
  • 28
  • 4
    Should it be preferred to add it to the root of the application? Instead of individual components – Abhinav Singi Apr 02 '19 at 06:15
  • 2
    @AbhinavSingi that depends on ur use case, if you don't want to cover some components(for any reason) you can add strict mode at multiple places and leave those components in hierarchy, else consider adding at root level to cover all components. – Rohit Garg Sep 12 '19 at 08:29
  • 2
    We wrap all the application in the `` to catch all the problems. It is very actual for nowadays when there are bunch of deprecated lifecycle methods we must avoid. But notice that `` causes problems with Apollo because of calling side effects twice; it allows `` to catch bugs but sometimes causes some strange behavior. Switch it off if you face strange problems you can't fix. – B. Bohdan Nov 22 '19 at 08:42
  • There is a catch with StrictMode you must be aware of: it will render your component twice the first time it loads, look at this example: https://codesandbox.io/s/strictmode-no-borrar-01t0wt?file=/src/index.js . "renderCount" is 2 after the page is finish rendering. If you remove the StrictMode helper component then "renderCount" will be what we all expect to be: 1 – lito May 04 '22 at 14:20
39

Warning: StrictMode will render the components twice only on the development mode not production.

For instance, if you're using getDerivedStateFromProps method like so

   static getDerivedStateFromProps(nextProps, prevState){// it will call twice
        if(prevState.name !== nextProps.name){
            console.log(`PrevState: ${prevState.name} + nextProps: ${nextProps.name}`) 
            return { name: nextProps.name }
        }
        return {}
    }

The getDerivedStateFromProps method will call twice.

Just to let you know this is not a problem, it's just because you're wrapping your main component with <StrictMode> in the index.js file.

StrictMode renders components twice in order to detect any problems with your code and warn you about them.

johnnzy
  • 68
  • 4
Liam
  • 5,261
  • 5
  • 20
  • 45
5

In short, StrictMode helps to identify unsafe, legacy, or deprecated APIs/lifecycles. It's used for highlighting possible problems. Since it's a developer tool, it runs only in development mode. It renders every component inside the web app twice in order to identify and detect any problems in the app and show warning messages.

Vaishali
  • 61
  • 1
  • 6
0

StrictMode is a tool for highlighting potential problems in an application. Like Fragment, StrictMode does not render any visible UI. It activates additional checks and warnings for its descendants.

Deepu Kumar
  • 1
  • 1