1.

Explain Strict Mode in React.

Answer»

StrictMode is a tool added in version 16.3 of React to highlight potential problems in an application. It performs additional checks on the application.

function App() { return ( <React.StrictMode> <div classname="App"> <Header/> <div> Page Content </div> <FOOTER/> </div> </React.StrictMode> );}

To enable StrictMode, <React.StrictMode> tags need to be added inside the application:

import React from "react";import ReactDOM from "react-dom";import App from "./App";const rootElement = document.getElementById("root");ReactDOM.render(<React.StrictMode> <App /></React.StrictMode>,rootElement);

StrictMode currently helps with the following issues:

  • Identifying components with UNSAFE lifecycle methods: 
    • Certain lifecycle methods are unsafe to use in asynchronous react applications. With the use of third-party libraries, it becomes DIFFICULT to ensure that certain lifecycle methods are not used.
    • StrictMode helps in providing us with a WARNING if any of the class components use an unsafe lifecycle method.
  • Warning about the usage of legacy string API:
    • If one is using an older version of React, callback ref is the recommended way to MANAGE refs instead of using the string refs. StrictMode gives a warning if we are using string refs to manage refs.
  • Warning about the usage of findDOMNode:
    • Previously, findDOMNode( ) method was used to search the tree of a DOM node. This method is deprecated in React. Hence, the StrictMode gives us a warning about the usage of this method.
  • Warning about the usage of legacy context API (because the API is error-prone).


Discussion

No Comment Found