Understanding and Enabling Strict Mode

React strict mode

React strict mode helps us write better React components by carrying out certain checks. This includes checks on class component life cycle methods.

React components can either be implemented using a class or a function. Class components have special methods called life cycle methods that can execute logic at certain times in the component’s life cycle.

Strict mode checks that the life cycle methods will function correctly in React concurrent mode.

Note: React concurrent mode is a set of features that help React apps stay responsive, even when network speeds are slow.

Strict mode checks life cycle methods in third-party libraries, as well as the life cycle methods we have written. So, even if we build our app using function components, we may still get warnings about problematic life cycle methods.

Strict mode checks also warn about the usage of old APIs, such as the old context API.

The last category of checks that strict mode performs is checked for unexpected side effects. Memory leaks and invalid application states are also covered in these checks.

Important Note: Strict mode checks only happen in development mode – they do not impact a production build.

Strict mode can be turned on by using a StrictMode component from React.Create React App has already enabled strict mode for the entirety of our app in index.tsx: