Strict Mode in React

How to Use Strict Mode in React

Strict Mode in React is a tool to highlight potential problems in the application. Like Fragment, Strict Mode does not offer any visual UI. It uses additional checks and warnings for its generations.

Strict Mode is warning about legacy string ref API usage

Identifying unsafe lifecycles 

As explained in this blog post, certain unhealthy heritage lifestyles are used in async React programs. However, if your application uses third-party libraries, it may be difficult to ensure that these live routes are not used. Fortunately, solid mode can help with this!

Read Also :  Get Current Date Month Year in React js

When the Strict Mode in React is enabled, React compiles a list of all category items using unsafe life cycles, and then includes a warning message with information about these items.

Example Strict Mode in React

Index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

class Demo extends React.Component {    
    render () {    
        return (    
            <>  
                <h3>Index Component</h3>
                <React.StrictMode>
                   <App />  
                </React.StrictMode>
            </>    
        );    
    }    
}    

ReactDOM.render(<Demo />,document.getElementById("root"));

App.js

import React, { Component } from 'react'
export default class App extends Component {

    componentDidMount(){
        console.log("Component Will Unmount");
    }

    render(){
        return <h1>Hello</h1>
    }
}