0

I've started a new job and noticed all their imports are done like:

import * as React from 'react'

And subsequently, they'll use React hooks like so:

React.useEffect(() => {})

Are there any pros/cons to importing it like that instead of the more conventional?:

import React, { useEffect } from 'react'

Will this import everything from React into each file?

Thanks.

ETA - I did ask my coworkers, but the response was, "Not sure, it's what we've been doing so we do it to stay consistent now" lol

Mr. Polywhirl
  • 42,981
  • 12
  • 84
  • 132
Steve
  • 21
  • 5
  • 2
    You should really ask the people your work with – Adam Jenkins Jan 23 '23 at 15:29
  • @Adam is right! They are the best placed to explain why THEY do like that... Differentiate from other libraries they may use? At least you know it comes from react now. That'd be my reason anyways – Salketer Jan 23 '23 at 15:32
  • 2
    It imports everything exported by the React package (or its default export, depending on the module and import config) into local scope, but your bundler is likely tree-shaking it down to only what's used. This is likely a stylistic choice done to make it more clear where particular functions come from in a given function. – Chris Heald Jan 23 '23 at 15:33
  • The way they are doing it is the current (future) way i.e. `import * as React from 'react'`. Your way is soon-to-be archaic. – Mr. Polywhirl Jan 23 '23 at 15:48
  • 1
    @Mr.Polywhirl what do you base this on? – Evert Jan 23 '23 at 15:56
  • @Evert See: [_"The React team decided to go with the named imports approach."_](https://epicreact.dev/importing-react-through-the-ages/#:~:text=The%20React%20team%20decided%20to%20go%20with%20the%20named%20imports%20approach./) ~ Source from the [linked Tweet](https://twitter.com/dan_abramov/status/1308739731551858689), _"in the long term (maybe in [React version] 19 or 20) we will stop supporting it."_ – Mr. Polywhirl Jan 23 '23 at 16:10
  • 1
    @Mr.Polywhirl important to note in that tweet the *first* one is still OK and not a `*` import. That's imho more likely where people will go vs prefixing every hook call with `React.` So _default_ import is going away, but _named_ is not. – Evert Jan 23 '23 at 16:55

0 Answers0