Home > Software design >  React StrictMode component and babel config strictmode is same thing?
React StrictMode component and babel config strictmode is same thing?

Time:11-20

I need to figure out, is there any difference between this code?

ReactDOM.render(
  <React.StrictMode>
     <App />
  </React.StrictMode>,
  document.getElementById('root')
);

And this babel configuration

{
  "strictMode": true
}

If I use only just babel config with strictMode:true then no need to StrictMode component? And vice versa

CodePudding user response:

StrictMode is a tool for highlighting potential problems in an application. Like Fragment, StrictMode does not render any visible UI. It activates additional checks and warnings for its descendants.

as mentioned in the documentation

when elements wrapped inside of <React.StrictMode> they :

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

While the strictMode in babel is for the ES6 modules to transform. ES6 modules have an implicit strict mode. There not much resource out there for babel but that's pretty much it.

  • Related