Import hooks into React Typescript

Question

I am trying to implement hooks into a React (^16.6.0) application using TypeScript

import * as React, {useState}  from 'react';

Any idea what is the right syntax for this import?

Answer 1

import supports a limited set of syntax variations.

It can be:

import React, {useState}  from 'react';

The downside is that entire library is imported, because React is default export and cannot be tree-shaken. Since the presence of React import is needed to use JSX syntax, a more efficient way is:

import * as React from 'react';
import {useState}  from 'react';

Hooks were introduced in pre-release React 16.7. react version constraint should be ^16.7.0-alpha.0, @types/react should be ^16.7.0.

Answer 2

I had the same error on "@types/react": "^16.8.17". Looking at it's type def file, it was missing the useState function for some reason, though it was mentioned in the comments of other hooks like useReducer.

Upgrading to "@types/react": "^16.8.18" with npm i @types/react@latest fixed it.