React is build on the concept of component, properties and state. React provides a relatively few set of API to create and update components. The basic features of React is enough for large part of the our front end application. But, still modern application has complex scenarios, which needs advanced front-end logic. React provides lot of high-level API, which will help us to create complex front-end application. The high-level API comes with a cost. High-level API are little bit tough to learn and apply it in our application.

React provides a strict mode, which helps the developer to properly apply the high-level API by highlighting the potential problem during development phase of our application. As we know, everything in the React is build on the concept of components, strict mode is simply a non-visual component, React.StrictMode. The usage of strict mode component is also very simple. Just wrap the component to be analyzed with React.StrictMode component as shown below −

<React.StrictMode>
   <OurComplexComponent />
</React.StrictMode>

Another functionality of the strict mode is to throw error or warning when certain legacy or depreciated API (which will eventually introduce bugs in the application) are used in the application.

Let us learn the list of items highlighted by strict mode component in this chapter.

Unsafe lifecycle usage

React identifies some of the legacy lifecycle events are unsafe to use in the async based application. They are as follows −

• componentWillMount

• componentWillReceiveProps

• componentWillUpdate

Unsafe means it will create hard to debug bugs in the application. React will eventually remove these unsafe lifecycle event in the future version of the library. Until then, developer are alerted when they use legacy unsafe lifecycle events.

Legacy ref API usage

Earlier version of React uses string based ref management and later added callback based ref management. The recommended way is to use callback based option due to its stability and less error-prone nature. Strict mode will throw warning if we use string based option.

The most recent version of React provides improved ref management option, which is both easy to code and less error-prone nature.

Legacy findDOMNode usage

findDOMNode helps to search the tree of DOM node given a class instance. The usage of findDOMNode is depreciated and promotes the usage of ref based DOM management.

Side effects

React has two major phases, render and commit. render phase involves major work and time-consuming and commit phase is straight forward and fast. React introduces a concurrent mode, which will improve the performance of the render phase. One of the requirement of the concurrent mode is that the lifecycle event used in the render phase should not contain side effects.

React will try to find the unexpected side effects using different approaches during development phase and report it as warning.

Legacy context API

Legacy context API is error-prone and it is not recommended to use. It will be removed in the future version. Until then, strict mode will detect the usage of legacy context API and report it.

Reusable state

Components with reusable state can be mounted and destroyed multiple time without any side effects and will help to improve the performance of the application. The future version of the React library will add or remove section of UI while preserving state. React 18 introduces a strict mode feature, which will try to unmount and remount the component to ensure the component is resilient. Any issue during this phase will be reported.