Hello React developers, you've probably heard of strict mode. But what the hell is it, exactly? In short term, React.StrictMode is a useful component for highlighting potential problems in an application. Just like <Fragment>, <StrictMode> does not render any extra DOM elements.. With this article, we'll dive into the details of what strict mode is, how it works and why you should consider using it in your applications..
What is Strict Mode in React?
Strict mode is a set of development tools that help you catch potential problems in your code before they become actual bugs. When you enable strict mode in your React application, you're essentially telling React to turn on a bunch of extra checksπ and warnings that are designed to help you write better code. These checks and warnings can catch things like:
- Components with side effects
- Deprecated or unsafe lifecycle methods
- Unsafe use of certain built in functions
- Duplicate keys in lists
Enabling Strict Mode
Enabling strict mode in your React application is actually very easy. You can do it by adding a single line of code to your main index.js file. Let's see:
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
Enabling strict mode for a part of the app
You can also enable Strict Mode for any part of your application:
import { StrictMode } from 'react';
function App() {
return (
<>
<Header />
<StrictMode>
<main>
<Sidebar />
<Content />
</main>
</StrictMode>
<Footer />
</>
);
}
In this instance, Strict Mode checks will not run against the Header and Footer components. But, they will run on Sidebar and Content, as well as all of the components inside them, no matter how deep it is..
Strict mode affects only the development environment
It's important to note that strict mode has no effect on the production build of your React application. This means that any checks or warnings that are enabled by strict mode will not be present in the final version of your application that users see. As we have seen, strict mode turns on extra checks and warnings, it can potentially slow down your development environment..
Strict mode can help you catch subtle bugs
Sometimes bugs in React applications can be difficult to track down, especially if they're caused by subtle issues like race conditions or incorrect assumptions about component state. By enabling strict mode and taking advantage of the extra checks and warnings it provides, you may be able to catch these bugs before they cause serious problems..
Strict mode can help you stay up-to-date with best practices
React is a rapidly evolving framework and best practices can change over time. By enabling strict mode and paying attention to the warnings and suggestions it provides, you can ensure that your React code is up-to-date and following current best practices. Such as using the key prop when rendering lists or avoiding side effects in render()..
Highlighting potential problems early
Strict mode can catch issues in your code that may cause problems in coming future, before they become serious problems. Let's say, it can detect and warn about deprecated lifecycle methods as well as access to findDOMNode() which is no longer recommended..
Preventing common mistakes
By enabling strict mode, you can avoid common mistakes that may not be immediately obvious, such as modifying the state directly instead of using setState() or using undeclared variables.
Identifying Unsafe Lifecycles
React Strict Mode can help identify the use of unsafe lifecycle methods in your components. For instance, it can warn you about the use of the componentWillUpdate and componentWillReceiveProps methods which are both considered unsafe and will be removed in future versions of React..
Let's say you have a component that uses componentWillReceiveProps() to update its state based on incoming props:
class BlackMamba extends React.Component {
constructor(props) {
super(props);
this.state = { venom: props.venom };
}
componentWillReceiveProps(nextProps) {
this.setState({ venom: nextProps.venom });
}
render() {
return <div>{this.state.venom}</div>;
}
}
With regular mode, this component would work as expected, but in React.StrictMode, you would see a warning in the console:
Warning: BlackMamba uses
componentWillReceiveProps, which is considered an unsafe lifecycle method. Instead, use staticgetDerivedStateFromProps.
Warning About Legacy String ref API Usage
Strict Mode can also warn you about the use of the legacy string ref API, which is considered deprecated. But, you should use the createRef API, which is safer and easier to use..
Let's say, you have a component that uses a string ref like this:
import { Component } from "react";
import { createRoot } from "react-dom/client";
class BlackMamba extends Component {
componentDidMount() {
this.refs.venom.focus();
}
render() {
return (
<>
<h1>Black Mamba</h1>
<input ref="venom" />
</>
);
}
}
const root = createRoot(document.getElementById("root"));
root.render(<BlackMamba />);
Legacy string ref API is considered deprecated, still you'll not see any errors in console.
When you enable React.StrictMode in your app like this:
import { StrictMode, Component } from "react";
import { createRoot } from "react-dom/client";
class BlackMamba extends Component {
componentDidMount() {
this.refs.venom.focus();
}
render() {
return (
<>
<h1>Black Mamba</h1>
<input ref="venom" />
</>
);
}
}
const root = createRoot(document.getElementById("root"));
root.render(
<StrictMode>
<BlackMamba />
</StrictMode>
);
You'll see a warning in the console that looks like this:
Warning: A string ref, "venom", has been found within a strict mode tree. String refs are a source of potential bugs and should be avoided. We recommend using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref
Let's fix it with createRef API:
import { StrictMode, Component, createRef } from "react";
import { createRoot } from "react-dom/client";
class BlackMamba extends Component {
constructor(props) {
super(props);
this.venom = createRef();
}
componentDidMount() {
this.venom.current.focus();
}
render() {
return (
<>
<h1>Black Mamba</h1>
<input ref={this.venom} />
</>
);
}
}
const root = createRoot(document.getElementById("root"));
root.render(
<StrictMode>
<BlackMamba />
</StrictMode>
);
Bravo, it's fixed :)
Detecting Legacy Context API
The legacy Context API is deprecated in React and has been replaced with the new Context API. React Strict Mode can help you detect any usage of the legacy Context API and encourage you to switch to the new API
If you're not already using strict mode, it's definitely worth considering!!!
β€ Motivation:
πSupport
Please consider following and supporting us by subscribing to our channel. Your support is greatly appreciated and will help us continue creating content for you to enjoy. Thank you in advance for your support!
Top comments (29)
Great article on Strict Mode in React! As a developer, I appreciate any tool or component that helps me catch potential problems before they cause issues for users. It's great to see how can highlight issues and improve the overall quality of an application. In our projects, we also use strict mode in our React applications to ensure best practices are followed and the performance is optimized. Thanks for sharing this informative piece!
Glad you found it helpful.. Thank you for your great feedback. Happy coding..
Very helpful and informative article! I never understood what strict mode was for. I just wish there was a way to make it work with WebSockets. I've had to disable Strict Mode to get WebSockets to work. github.com/facebook/create-react-a...
good article!
Thank you my friend
Π‘ongratulations π₯³! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up π
Thanks a ton man..
Thanks for this.
Can you provide examples of how React.StrictMode helps identify issues related to unsafe lifecycle methods or improper use of the ref API in a developer's code?
I have updated the article as per your request..
Thanks for reading it.
You have a good point, I will update the article accordingly..
great article
Thank you bro
Wow, great article.
Thank you for this post
Thank you..
Any reason this not enabled by default?
Hmm, it may have a negative impact on the performance of your app if it's enabled as default. performs some additional checks to catch the potential bugs..
This is a great article! You did a great job explaining Strict Mode in React. I learned a lot from it. Thanks for sharing!
Thank you for sharing kind words
Great article and explanation.
Thank you boss π