Typescript error on react useState hook when updating typescript version

Question

I developed a react typescript application with react 16.9 and typescript 3.5.2. It uses react state hooks like

const [hValue, setHValue] = useState();

type of the hValue is IValue

So the setHValue has return type React.Dispatch<any>

Then I updated the typescript version to 3.9.7 and it gives compilation errors and it seems that now the return type of setHValue has changed to React.Dispatch<React.SetStateAction<undefined>>

Why is that? and how to resolve this issue?

what's the type of hValue?

Ramesh Reddy
– Ramesh Reddy

2020-09-17 04:50:47 +00:00
Commented Sep 17, 2020 at 4:50 — Ramesh Reddy
– Ramesh Reddy, Commented Sep 17, 2020 at 4:50
IValue I edited the questions and included that

u53r
– u53r

2020-09-17 04:57:46 +00:00
Commented Sep 17, 2020 at 4:57 — u53r
– u53r, Commented Sep 17, 2020 at 4:57

Sabrina Luo · Accepted Answer · 2020-09-17 04:59:53Z

2

Let's have a look at the type of useState

    function useState<S = undefined>(): [S | undefined, Dispatch<SetStateAction<S | undefined>>];

It is to say, if you didn't specify any S, it will be undefined by default.

So you will need to specify your initial type, say if hValue is a number, you can do

const [hValue, setHValue] = useState<number>();

In this way, setValue will be React.Dispatch<SetStateAction<number>> type

answered Sep 17, 2020 at 4:59

Sabrina Luo

4,0504 gold badges19 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

u53r Over a year ago

In above example setValue will be setHaValue: React.Dispatch<React.SetStateAction<number | undefined>> type

Collectives™ on Stack Overflow

Typescript error on react useState hook when updating typescript version

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related