What is the strict mode in React?
Strict mode is a feature in React that helps us create more secure and robust code for our web applications. The strict mode in React is a development mode feature that allows us to detect errors and provides our code with additional warnings and checks. These checks and warnings help us design our application by following best practices and preventing common mistakes, improving React applications' overall quality.
Note: These checks and warnings only apply to the descendants of components written under the strict mode.
How it works
React strict mode is a developer tool that runs only in development mode. It does not affect the production build. Moreover, it renders components twice to detect any errors in our code and warn us about them. To enable strict mode in our React application, we wrap our specific components with the <React.StrictMode>.
<React.StrictMode>{/* Our application code */}</React.StrictMode>
How to check warnings
After understanding the implementation of the strict mode, let’s understand the steps to check the warnings in the code examples mentioned in this Answer.
After starting our React project, we simply click the app link below the code. It opens our application in the browser.
Next, we right-click the mouse to access the context menu and select the "Inspect" option.
We can see our Inspect options on the right side of the browser. We proceed to click on the "Console" section.
Within the Console section, we can view our code warnings.
React strict mode warnings
React strict mode offers enhanced warning and detection capabilities to improve the development process and catch potential issues in our React application. Let's discuss these warnings.
Warning on unsafe life cycles
When we enable React strict mode, it alerts us if we are using any unsafe life cycle methods in the components wrapped in it. These warnings remind us to update our code and adopt safer alternatives.
Example
In the following code, our class component App uses the componentWillUpdate life cycle method in lines 5–7. This method is an unsafe life cycle method and is now deprecated. Since we have wrapped our App component in React.StrictMode in index.js, we get a warning.
import React, { Component } from 'react';
class App extends Component {
componentWillUpdate(nextProps, nextState) {
// we perform our working here
}
render() {
return <div>My Component</div>;
}
}
export default App;
Warning
To see the warning, we open our React app on the browser and inspect our code to see the warnings on the console.
Warning on legacy Context API
React's strict mode performs additional checks on our components and alerts us if we are using the legacy or outdated version of the Context API. These alerts remind us to update our Context API version for the more smooth and more reliable working of our React application.
Example
In the following code, we create our class component App that extends Component from the react package. The component defines a method getChildContext in lines 11–15, which returns an object representing the legacy API context. Since we have wrapped our App component in React.StrictMode in index.js, we get a warning about using legacy context API in our code.
import React, { Component } from 'react';
import PropTypes from 'prop-types';
class App extends Component {
// We define the child context types
static childContextTypes = {
api: PropTypes.string,
};
// we provide the context value
getChildContext() {
return {
api: 'Legacy Api Context',
};
}
render() {
return <h1>Learn with Educative.</h1>;
}
}
export default App;
Warning
To see the warning, we open our React app on the browser and inspect our code to see the warnings on the console.
Warning on string ref API
In the current best practices of React, we use the createRef API instead of the legacy string ref API for a safer and more reliable functioning of our application. React strict mode feature helps us identify and throw warnings whenever legacy string ref API is used in our code.
Example
In the following code, our class component App uses legacy string ref API, as we can see in line 12. Since we have wrapped our App component in React.StrictMode in index.js, we get a warning that we should replace our legacy string ref API with createRef. The warning can be seen in the terminal of the following code.
import { Component } from "react";
class App extends Component {
componentDidMount() {
this.refs.inputRef.focus();
}
render() {
return (
<div>
<p>Input: </p>
<input ref="inputRef" />
</div>
);
}
}
export default App;
Warning
To see the warning, we open our React app on the browser and inspect our code to see the warnings on the console.
Warning on deprecated findDOMNode:
The findDOMNode can only read the DOM once, and it doesn't handle changes when a child component tries to render a different node than what the parent component expects. React strict mode warns us when we use findDOMNode. These warnings remind us that findDOMNode may not handle certain scenarios properly and could lead to unexpected behavior or bugs.
Example
In the following code, our class component App uses the ReactDOM.findDOMNode() in the componentDidMount() function in line 6. Since we have wrapped our App component in React.StrictMode in index.js, we get a warning that we should not use findDOMNode as it may not handle certain scenarios properly.
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class App extends Component {
componentDidMount() {
ReactDOM.findDOMNode(this);
}
render() {
return <div>My Component</div>;
}
}
export default App;
Warning
To see the warning, we open our React app on the browser and inspect our code to see the warnings on the console.
Example
In the following code example, our class component App renders an input element with the ref attribute set to inputRef in line 12. In our componentDidMount life cycle method, we focus on the input element using this.refs.inputRef.focus(). Our code triggers a warning because it uses the string ref API, which has been deprecated in new versions of React and is no more recommended to use.
import { Component } from "react";
class App extends Component {
componentDidMount() {
this.refs.inputRef.focus();
}
render() {
return (
<div>
<p>Input: </p>
<input ref="inputRef" />
</div>
);
}
}
export default App;
It gives the following warning.
To fix our warning, we use the createRef method instead of legacy string ref API, as shown in line 17. Now our code has no potential errors or warnings.
import React, { Component, createRef } from "react";
class App extends Component {
constructor(props) {
super(props);
this.inputRef = createRef();
}
componentDidMount() {
this.inputRef.current.focus();
}
render() {
return (
<div>
<p>Input: </p>
<input ref={this.inputRef} />
</div>
);
}
}
export default App;
Conclusion
React's strict mode is a powerful tool that helps in the development process to improve the quality of React applications. By using this tool, we can reduce potential errors and ensure best practices in our application.
Free Resources