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?

Satiate

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.

Slosberg

Sorry still not working it gives me the following 'Module '"C:/web-client-ts/node_modules/@types/react/index"' has no exported member 'useState'.' – Satiate

It should be because of the version in "@types/react" is not yet updated. Please npm i @types/react@latest and try again – Llama

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.

Krueger

still giving the error – Locust

Also bugged in the 17.x.x branch. 17.0.27 bugged, 17.0.44 fixed. – Malefic

Answer 3

Restarting Ts Server Helped in my case

Augustusaugy

Answer 4

try installing npm i @types/react

Arboretum

Suggesting to install @types/react already covered here: stackoverflow.com/a/56345351 – Hunsaker