imports with React
There are three types of most import commonly used imports.
(1) ESModules namespace import
(2) ESModules named import
This will import A from abc, containing something like this:
(3) ESModules default import
This will import the default export from abc as A. The export can look like this:
Typescript is strict when it comes to imports, which is why you have to write import * as React from ‘react’ or set “allowSyntheticDefaultImports”: true to allow synthetic default imports in your tsconfig.json.
This allows you to use ES6 default imports even when the source code you are importing doesn’t export anything as default.
Hint: Since the release of React 17 which automatically transforms JSX without using React.createElement you don’t have to import React, only if you use a Hook and other exports from React.
Which import should I use with the example of useState()?
Option 1: ESModules default import
Option 2: ESModules named import
Option 3: ESModules namespace import
Recommendations:
Dan Abramov said that the default import ( import React from ‘react’) will stop being supported by React at some point.
I would recommend just importing what you are using in your file like this:
