Recommended way of importing React

[filiptammergard]

The first opinionated statement in the Basic Cheatsheet is that the most future proof way of importing React is using namespace import:

import * as React from "react";

This might have been true a few years ago, but I think the widely spread recommended way nowadays is using destructured named imports, and only import what you need explicitly:

import { useState } from "react";

React Beta docs uses detructured named imports and I don't see why using TypeScript would make it different.

The announcement of the new JSX Transform that came with React 17 made it clear that destructured named imports is the preferred style going forward. Here's a quote of what the provided codemod does:

Change all default React imports (i.e. import React from "react") to destructured named imports (ex. import { useState } from "react") which is the preferred style going into the future. This codemod will not affect the existing namespace imports (i.e. import * as React from "react") which is also a valid style. The default imports will keep working in React 17, but in the longer term we encourage moving away from them.

Along where we say using namespace imports is the most future proof way in the Basic Cheatsheet, we're also saying this:

If you set --allowSyntheticDefaultImports (or add "allowSyntheticDefaultImports": true) in your tsconfig.json you can use more familiar [default] imports.

Since default imports are not recommended, I'm not sure we even need to keep this at all. For many React developers, destructured named imports is becoming the new most familiar way of importing React. If not throwing it out completely, I think it should be reworked a bit and placed in <details>.

I'm happy to work on this according to my thoughts here, but I'd like to hear your thoughts as well first since I'm not sure if this is controversial. I'd also like to hear your opinion on direction. Should we:

1. Remove the section about importing React completely? Aside from the allowSyntheticDefaultImports quirk needed to get default import of React working, there's not really anything special about importing React when using TypeScript compared to JavaScript. Why not let React's best practices apply and add something here if there is something TypeScript related to keep in mind in the area?
2. Modify the section to recommend destructured named imports of React?
3. Keep as is?

Let me know what you think. Particularly interested in your thoughts @eps1lon!

[eps1lon]

I'd keep it simple and do whatever https://beta.reactjs.org/ does.

Ideally we'd archive this cheatsheet and just link to the relevant sections on reactjs.org but it will take a while to upstream everything.

[filiptammergard]

Does that mean you'd go for removing the section about importing React in the cheatsheet in this case?

[eps1lon]

could you link that section? just to make sure there's nothing we should keep. But I wouldn't recommend an import style here. That's up to the library.

[filiptammergard]

Ah sorry, here it is: https://react-typescript-cheatsheet.netlify.app/docs/basic/setup#import-react

[eps1lon]

Yeah that section can be removed. It's really annoying if that comes up in a discussion and one party links the official docs and the other party links this cheatsheet. We should just sync with the official docs. And if they still use import React from 'react' we should update it (considering facebook/react#18102)