How to deal with react, react-dom, @types/react and @types/react-dom package versions?

Question

Recently, I upgrade version of react/react-dom in my project from 16.3.2 to 16.8.6 to be able to use hooks and, with some minor changes in my code, everything went well.

But we are using typescript, and when I try to use React.useState(), typescript compiler complains and is unable to compile : Property 'useState' does not exist on type 'typeof React'.

I think the problem is that @types/react and @types/react-dom packages were not up-to-date. So I tried to upgrade them from 16.3.2 to 16.8.5 (16.8.6 doesn't exist for @types/react-dom).

Then I was able to use usestate() but everything else was broken, typescript compiler was complaining about almost every component...

My question is: what should I do ? What is the best approach to upgrade those packages ? Do versions need to be the same ?

Thanks.

Answer 1

import React from 'react';


export default function App() {
  const [state, setState] = React.useState(); 
}

Did you try on that way?

and you are using the right @types in your package.json

"@types/react": "^16.8.14",
"@types/react-dom": "16.8.3",
"typescript": "3.5.3"

Answer 2

Short answer, @types/react and @types/react-dom versions may not be the same. You have to choose the correct versions based on the versions of typescript and react that you're using.

Here's how:

For example, imagine you are using react 17.x.y. Because of that, you would look at the 17.x.y versions of @types/react. To choose the final one, you would look at the tag next to each one of those and choose the one that matches your typescript version (tsX.Y). Imagine if you are using typescript 3.8.x. You could choose this package:

The same thing for @types/react-dom.