React Imports | theodorusclarence.com

Preferred way of importing React in a page.

React 17

Although with the React 17 release it is not mandatory to import React on every page, it is a hassle to get back on top of the file and import a useState every time we need to.

With React 17, there are generally two ways of doing react imports:

import * as React from 'react';
const [count, setCount] = React.useState(0);
 
// or
 
import { useState } from 'react';
const [count, setCount] = useState(0);

Well, for the second way, auto import on VSCode works great, but my machine is not that great.

I also hate to remove imports if we decide not to use that hook anymore.

Preferred Way

import * as React from 'react';

By using this one, we can just call the hooks without worrying about imports.

Furthermore, if you are using TypeScript, not doing the first way can make code ugly when we need to import many types such as React.MouseEvent, React.ChangeEvent, etc.