- ReactJS Tutorial
- ReactJS - Home
- ReactJS - Introduction
- ReactJS - Installation
- ReactJS - Features
- ReactJS - Advantages & Disadvantages
- ReactJS - Architecture
- ReactJS - Creating a React Application
- ReactJS - JSX
- ReactJS - Components
- ReactJS - Nested Components
- ReactJS - Using Newly Created Components
- ReactJS - Component Collection
- ReactJS - Styling
- ReactJS - Properties (props)
- ReactJS - Creating Components using Properties
- ReactJS - props Validation
- ReactJS - Constructor
- ReactJS - Component Life Cycle
- ReactJS - Event management
- ReactJS - Creating an Event−Aware Component
- ReactJS - Introduce Events in Expense Manager APP
- ReactJS - State Management
- ReactJS - State Management API
- ReactJS - Stateless Component
- ReactJS - State Management Using React Hooks
- ReactJS - Component Life Cycle Using React Hooks
- ReactJS - Layout Component
- ReactJS - Pagination
- ReactJS - Material UI
- ReactJS - Http client programming
- ReactJS - Form Programming
- ReactJS - Controlled Component
- ReactJS - Uncontrolled Component
- ReactJS - Formik
- ReactJS - Conditional Rendering
- ReactJS - Lists
- ReactJS - Keys
- ReactJS - Routing
- ReactJS - Redux
- ReactJS - Animation
- ReactJS - Bootstrap
- ReactJS - Map
- ReactJS - Table
- ReactJS - Managing State Using Flux
- ReactJS - Testing
- ReactJS - CLI Commands
- ReactJS - Building and Deployment
- ReactJS - Example
- Hooks
- ReactJS - Introduction to Hooks
- ReactJS - Using useState
- ReactJS - Using useEffect
- ReactJS - Using useContext
- ReactJS - Using useRef
- ReactJS - Using useReducer
- ReactJS - Using useCallback
- ReactJS - Using useMemo
- ReactJS - Custom Hooks
- ReactJS Advanced
- ReactJS - Accessibility
- ReactJS - Code Splitting
- ReactJS - Context
- ReactJS - Error Boundaries
- ReactJS - Forwarding Refs
- ReactJS - Fragments
- ReactJS - Higher Order Components
- ReactJS - Integrating With Other Libraries
- ReactJS - Optimizing Performance
- ReactJS - Profiler API
- ReactJS - Portals
- ReactJS - React Without ES6 ECMAScript
- ReactJS - React Without JSX
- ReactJS - Reconciliation
- ReactJS - Refs and the DOM
- ReactJS - Render Props
- ReactJS - Static Type Checking
- ReactJS - Strict Mode
- ReactJS - Web Components
- Additional Concepts
- ReactJS - Date Picker
- ReactJS - Helmet
- ReactJS - Inline Style
- ReactJS - PropTypes
- ReactJS - BrowserRouter
- ReactJS - DOM
- ReactJS - Carousel
- ReactJS - Icons
- ReactJS - Form Components
- ReactJS Useful Resources
- ReactJS - Quick Guide
- ReactJS - Useful Resources
- ReactJS - Discussion
ReactJS - Strict Mode
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.