documentation/blog/2024-07-10-react-strict-mode.md
This article was last updated on July 10, 2024, to add sections for React Strict Mode post.
In recent years, React.js has undergone significant development by adding and improving new features to solve discovered bugs and provide tools that improve application performance. In March 2022, a new version (React v18.0) was released with features such as React Strict Mode, Server-Side Rendering (SSR), Suspense, Concurrency, Automatic Batching, and the introduction of new hooks.
Among all of the new features, the React Strict Mode feature stood out for its extensive improvements and functions in areas such as identifying coding patterns for bugs, providing feedback to developers with no impact on the production build, and much more.
In this article, we'll see the React Strict Mode, how it relates to the JavaScript “use strict” expression, its importance, benefits, features, and significant improvements.
React Strict Mode is a developer tool highlighting potential bugs or issues in a React application's codebase. It provides warnings to developers as feedback for errors that occur in an application, with no effect on the result because it does not render any visible UI.
With React v18.0, new features were added to the framework, and some existing features were significantly improved.
React Strict Mode runs some functions in the development environment to ensure that they return values identical to the desired arguments and have no unintended side effects. These functions are as follows:
Strict Mode, on the other hand, detects errors in coding patterns and flags previously accepted "bad syntax" as errors by eliminating silent errors and throwing errors when they occur. React Strict mode works similarly to JavaScript's "use strict" expression in that it ensures a more strict and type-safe version of JavaScript.
The relationship between React Strict Mode and the "use strict" expression is described in the table below:
Undeclared variables will return an error in React Strict mode. It checks for the following:
You can reference the Strict Mode by using <React.StrictMode>, or import { StrictMode } from 'react' in your code. Then, the component can be called as StrictMode.
Wrap the suspected code in the Strict Mode helper component as shown in the code block below:
import React from "react";
import ReactDOM from "react-dom/client";
const root = ReactDOM.createRoot(document.getElementById("root"));
const SuspiciousCode = () => {
return <div>Contains suspicious code blocks</div>;
};
root.render(
<React.StrictMode>
<SuspiciousCode />
</React.StrictMode>,
);
The expression “use strict” flags out the following as errors:
Both statements in the code example below will return errors because arguments is a reserved words and variable x is not defined.
Also, “use strict” must be specified at the top of the file for it to take effect.
"use strict";
let arguments = "an argument";
x = 500;
Strict Mode plays a significant role in the incremental adoption of Concurrent rendering, a new implementation detail that, in simple terms, allows rendering UI to be interruptible. While in development, Strict Mode can be used to help expose concurrency-related bugs.
The new React Strict Mode behaviors are as follows:
React Strict Mode comes with a couple of outstanding benefits:
In this section, you will learn about the current features of StrictMode, which include:
Legacy components such as componentWillMount, componentWillReceiveProps, and componentWillUpdate have been discovered to cause unhealthy code practices in React. When misused in asynchronous React applications, they produce undesirable results. As a result, React developers decided to prefix these lifecycles with UNSAFE_ in future releases.
As an improvement, React Strict Mode will now detect and warn the developer whenever these lifecycles are used. Furthermore, React Strict Mode inspects third-party packages in the development environment and can notify the user if these packages use deprecated dependencies.
Due to difficulties in passing refs to child components and issues with referencing the names of created Refs, the use of the String Ref in React, which was previously acceptable in previous versions, now has a warning in Strict Mode. Strict Mode warns developers, instructing them to use Callback refs or React.createRef as best practices.
FindDOMNode was a React feature designed to search the DOM node tree for a specific class interface. A refactoring issue caused by the FindDOMNode approach was that the parent component needed to be aware of their child's implementation details to return the appropriate child. Another issue was that FindDOMNode did not reflect changes in the state of node elements.
<div> <a href="https://discord.gg/refine"> </a> </div>Due to the Strict Mode practice of double invoking function routines, functions can scrutinize their results to ensure they are pure and produce the desired results whenever the functions run. As a result, if a side effect occurs erroneously during the function render process, it can easily be detected and traced in Development Mode due to visible inconsistencies in the program’s output.
StrictMode now highlights the use of the old Context API, prompting the user to upgrade to a higher version, as the Legacy Context API will be discontinued in future React releases.
In future versions, the React Strict Mode aims to prevent state loss caused by component mounts and dismounts. This feature improves performance by retaining and restoring application states when dismounted components are mounted back into the component tree.
Some other features of React Strict Mode that you might be helpful are the following, which help you to write cleaner and more performant code:
Using string refs is not a great practice within React. Strict Mode will warn you about them and suggest using callback refs or React.createRef instead.
findDOMNode Usage WarningThe findDOMNode method is also now deprecated. React Strict Mode will now raise warnings when you are using this and will let you know what to use instead.
React Strict Mode runs some functions twice, specifically in development mode, thereby bringing to your attention those side effects that could slip by you during a normal cycle. This way, it makes sure that your functions are pure and reliable.
The old Context API will be warning and suggesting your project update to use the newer version of the Context API, which is more stable and easier to use than before.
Strict Mode tries to ensure that state isn't lost when components are unmounted and then remounted—meaning your components can keep their state across mounts, making your app more efficient.
These features are very useful in improving your development workflow and catching any prospective issues as early as possible. If you have not yet enabled React Strict Mode, I strongly advise trying it out.
## Integrating React Strict Mode with Other Tools
I would like to share some ideas with you regarding combining React Strict Mode with tools that can be used in your projects, thereby enhancing your development workflow and helping you catch more issues early.
ESLint is a tool to find and fix problems in your JavaScript code. For example, you could add rules into your ESLint configuration to enforce best practices that are aligned with React Strict Mode.
Add rules such as react/no-deprecated to warn you about using deprecated lifecycle methods. This is meant to be a supplement to the warnings you'll get from React Strict Mode.
{
"extends": ["eslint:recommended", "plugin:react/recommended"],
"plugins": ["react"],
"rules": {
"react/no-deprecated": "warn", // Warn about deprecated lifecycle methods
"react/no-direct-mutation-state": "error" // Prevent direct state mutation
},
"settings": {
"react": {
"version": "detect"
}
}
}
Setup Prettier is a code formatter that enforces code style consistently without arguing what it looks like. It works pretty easily in concert with ESLint so that you never have to worry about keeping your code in line with best practices. Example Configure Prettier in your project by installing it and configuring it to your ESLint. So your code not only looks correct but is right according to the best practices to do with React.
{
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:prettier/recommended"
],
"plugins": ["react", "prettier"],
"rules": {
"prettier/prettier": "error", // Enforce Prettier formatting
"react/no-deprecated": "warn"
},
"settings": {
"react": {
"version": "detect"
}
}
}
Setup Jest is a JavaScript testing framework. You will run your tests in an environment with a similar setup to React Strict Mode and catch more potential issues earlier in the development process. Example Set up your Jest environment to use React Strict Mode. This way, you can catch warnings and errors related to strict mode when tests are run.
module.exports = {
setupFilesAfterEnv: ["<rootDir>/setupTests.js"],
testEnvironment: "jsdom",
};
// setupTests.js
import React from "react";
import { render } from "@testing-library/react";
const AllTheProviders = ({ children }) => {
return <React.StrictMode>{children}</React.StrictMode>;
};
const customRender = (ui, options) =>
render(ui, { wrapper: AllTheProviders, ...options });
export * from "@testing-library/react";
export { customRender as render };
In this article, you learned about the React Strict Mode, its similarities to the JavaScript “use strict” expression, and the enormous benefits and features of the React Strict Mode.