/* Code-Comments */

React’s StrictMode

November 05, 2019

As React continues to upgrade its API, there are parts the team is working to deprecate.

If you want to make sure your app stays up to date with the current spec and receive warnings when you’re using deprecated methods - you can wrap your entire app (or just parts of it) with a component: <React.StrictMode>

For example, imagine the root of your app as the following:

import React from “react”;
import { render } from “react-dom”;
import SearchParams from./SearchParams”;

const App = () => (
    <div id=“main-div”>
      <h1>Adopt Me!</h1>
      <SearchParams />
    </div>
);

render(<App />, document.getElementById(“root”));

We can wrap the entire app:

const App = () => (
  <React.StrictMode>
    <div id=“main-div”>
      <h1>Adopt Me!</h1>
      <SearchParams />
    </div>
  </React.StrictMode>
);

Or just a part (e.g., <SearchParams/>:

const App = () => (
  <div id=“main-div”>
    <h1>Adopt Me!</h1>
    <React.StrictMode>
      <SearchParams />
    </React.StrictMode>
  </div>
);

Stephen Weiss

Thanks for reading! My name's Stephen Weiss. I live in Chicago with my wife, Kate, and dog, Finn.
Click here to see the archives of my weeks in review and sign up yourself!