Progress

React.js Strict Mode for Better Code

React.js Strict Mode for Better Code

React.js is an advanced framework for building frontend and a framework in active development has multiple features which depreciate over time.

It is often hard to keep track of all the changes and deprecations in the frameworks and follow best development practices.

React.js 16.3 has introduced Strict Mode in which is an awesome tool to highlight common problems in an application.

What is React.js StrictMode?

React's Strict Mode is a higher-order component which highlights the common problems in the application but only in development mode. It is more like an automated best practices guide.

Like Fragment in React 16 strict mode also does not render and visible UI element.

Strict Mode in React.js is very helpful too and detect these issues in your application.

  • Identify components with unsafe lifecycles
  • Warn about legacy ref API and deprecated findDOMNode usage
  • Detech legacy context API
  • Detect unexpected side effects

How to enable React.js Strict Mode?

import React from 'react';

function StrictDemo() {
  return (
    <>
      <Navbar />
      <React.StrictMode>
        <div>
          <Post />
          <Comment />
        </div>
      </React.StrictMode>
      <Footer />
    </>
  );
}

In the following example, the strict mode will check the Post and Comment component and their descendants. It will ignore Navbar and Footer component for checking.

If we want to enable strict mode in the whole application we can wrap the App component with React.StrictMode.

It is important to note that strict mode has no effect on production and it is helpful only in the development site.

Share the Post ;)

Related Posts