This site runs best with JavaScript enabled.

How to Enable React Strict Mode

March 04, 2019


What it is and how to add it to your app.

In January 2018, Brian Vaughn added <React.StrictMode />. Here's how to start using it in your app today:

1ReactDOM.render(
2- <App />,
3+ <React.StrictMode><App /></React.StrictMode>
4 document.getElementById('root')
5 )

Ok, so what does this do? Go ahead and give it a try in your app and see what happens. Don't worry, I'll wait...

waiting...

What happens will be different for everyone, but here's an example of what some of you might have seen:

1Warning: A string ref, "myDiv", has been found within a strict mode tree. String refs are a source of potential bugs and should be avoided. We recommend using createRef() instead.
2
3 in StringRef (created by App)
4 in StrictMode (created by App)
5 in App
6
7Learn more about using refs safely here:
8https://fb.me/react-strict-mode-string-ref
9
10Warning: Unsafe lifecycle methods were found within a strict-mode tree:
11 in StrictMode (created by App)
12 in App
13
14componentWillMount: Please update the following components to use componentDidMount instead: WillMount
15
16componentWillReceiveProps: Please update the following components to use static getDerivedStateFromProps instead: WillReceiveProps
17
18componentWillUpdate: Please update the following components to use componentDidUpdate instead: WillUpdate
19
20Learn more about this warning here:
21https://fb.me/react-strict-mode-warnings
22
23Warning: Legacy context API has been detected within a strict-mode tree:
24 in StrictMode (created by App)
25 in App
26
27Please update the following components: MyColorDiv, MyColorProvider
28
29Learn more about this warning here:
30https://fb.me/react-strict-mode-warnings
31
32Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of FindDOMNode which is inside StrictMode. Instead, add a ref directly to the element you want to reference.
33
34 in div (created by FindDOMNode)
35 in FindDOMNode (created by App)
36 in StrictMode (created by App)
37 in App
38
39Learn more about using refs safely here:
40https://fb.me/react-strict-mode-find-node

And here's the code that I used to generate those warnings:

1import React from 'react'
2import ReactDOM from 'react-dom'
3import PropTypes from 'prop-types'
4
5class WillMount extends React.Component {
6 componentWillMount() {
7 // Use componentDidMount instead
8 }
9 render() {
10 return null
11 }
12}
13
14class WillReceiveProps extends React.Component {
15 componentWillReceiveProps() {
16 // Use static getDerivedStateFromProps
17 }
18 render() {
19 return null
20 }
21}
22
23class WillUpdate extends React.Component {
24 componentWillUpdate() {
25 // Use componentDidUpdate instead
26 }
27 render() {
28 return null
29 }
30}
31
32class StringRef extends React.Component {
33 render() {
34 // Use React.createRef instead
35 return <div ref="myDiv" />
36 }
37}
38
39class FindDOMNode extends React.Component {
40 componentDidMount() {
41 // Use React.createRef instead
42 ReactDOM.findDOMNode(this)
43 }
44 render() {
45 return <div />
46 }
47}
48
49class MyColorDiv extends React.Component {
50 // Use React.createContext().Consumer instead (or even better useContext)
51 static contextTypes = {color: PropTypes.string}
52 render() {
53 return <div style={{color: this.context.color}} />
54 }
55}
56
57class MyColorProvider extends React.Component {
58 // Use React.createContext().Provider instead
59 static childContextTypes = {color: PropTypes.string}
60 getChildContext() {
61 return {color: 'purple'}
62 }
63
64 render() {
65 return this.props.children
66 }
67}
68
69function App() {
70 return (
71 <>
72 <WillMount />
73 <WillReceiveProps />
74 <WillUpdate />
75 <StringRef />
76 <FindDOMNode />
77 <MyColorProvider>
78 <MyColorDiv />
79 </MyColorProvider>
80 </>
81 )
82}
83
84ReactDOM.render(
85 <React.StrictMode>
86 <App />
87 </React.StrictMode>,
88 document.getElementById('root'),
89)

And you can check this out for yourself in this codesandbox.

Each of these warnings has a solid workaround that will make your code better in various ways (most of them are related to concurrent mode which should hopefully come to React later this year). Getting these warnings taken care of today will make it much easier for you to upgrade to concurrent react bug-free when it comes along.

That said, don't freak out if you have a ton of warnings in your app. Your code will continue to work in the future. There's also an UNSAFE_ prefix for those lifecycle methods you can use to silence the warning if you need. React wont leave you in the dust here.

It runs code TWICE

Another thing that React Strict Mode does is run certain callbacks/methods twice (in DEV mode ONLY). You read that right! The following callbacks/methods will be run twice in Strict Mode (in DEV mode ONLY):

  • Class component constructor method
  • The render method (includes function components)
  • setState updater functions (the first argument)
  • The static getDerivedStateFromProps lifecycle
  • The React.useState state initializer callback function
  • The React.useMemo callback

Checkout this codesandbox which logs to the console in hook callbacks and class methods to show you that certain things happen twice.

React does this because it cannot reliably warn you against side-effects you do in those methods. But if those methods are idempotent, then calling them multiple times shouldn't cause any trouble. If they are not idempotent, then you should notice funny things which you should hopefully be able to notice and fix.

Note that useEffect and useLayoutEffect callbacks are not called twice even in dev mode + strict mode because the entire point of those callbacks is to perform side-effects.

Note that I also observed that the reducer you pass to React.useReducer is not called twice in dev mode. I'm not sure why this is because I feel like that could also benefit from this kind of warning.

You'll note that if you download either of my codesandbox projects and run the build script (which enables production mode), all of the warnings go away and the callbacks are only called once. This is because these are only there to help you during development and will not impact you in production.

Third Party Code

Rendering your app in React.StrictMode will warn you when a component is using a suboptimal method or API and it will help you catch things that can cause bugs that can be hard to debug. But sometimes the code that's violating strict mode isn't your own code, but code in a library.

So what do you do when you get a warning like this in a third-party component? I recommend seeing how easy it would be to open a PR to the project. If that doesn't work out, then you could just "vendor" (download and commit it) or "fork" that dependency and move on.

Conclusion

Remember, your code will continue to work whether you're using strict mode and fixing the warnings or not.

One approach that I think many teams are adopting (and I recommend) is to start by wrapping parts of your app in <React.StrictMode /> instead of the entire app:

1function App() {
2 return (
3 <div>
4 <OldPartOfTheApp />
5 <React.StrictMode>
6 <SomeNewFeature />
7 </React.StrictMode>
8 <AnotherOlderPartOfTheApp />
9 </div>
10 )
11}

You can use <React.StrictMode /> anywhere in your app at any depth. This can be great way to opt certain parts of your app into strict mode without getting a ton of warnings everywhere.

I hope that doing this will help you catch bugs in your React codebases!

See you around 💯

Read more about Strict Mode from the react docs

Share article