DEV Community

David Johnston
David Johnston

Posted on


Type inference from React.useState

The Problem

import React from "react";

const Foo = () => {
    const [value, setValue] = React.useState(); 
    return <input value = {value} onChange = {(e) => setValue(}/>

Playground Link

This code produces the following TypeScript error:

Argument of type 'string' is not assignable to parameter of type 'SetStateAction<undefined>'.(2345)

Quick Solution

Explicitly state the generic type:

import React from "react";

const Foo = () => {
    const [value, setValue] = React.useState<string | undefined>(); 
    return <input value = {value} onChange = {(e) => setValue(}/>

Or set the initial state to an empty string.

import React from "react";

const Foo = () => {
    const [value, setValue] = React.useState(''); 
    return <input value = {value} onChange = {(e) => setValue(}/>

(This may not be appropriate for all cases, ie maybe you really do want to leave that value undefined).


The useState function has a generic parameter which we are not setting/declaring in the original case.

This leaves TypeScript to infer the generic type from the arguments given.

In this case useState() with no arguments, TypeScript infers the type as undefined.

TypeScript doesn't know that you later want to set a string into state here.

That is, leaving the generic parameter off is equivalent of doing:

const [value, setValue] = React.useState<undefined>(); 

The generic parameter determines the type of the value and setValue variables.

In this case, the setValue function is going to be the equivalent of:

function setValue(value: undefined) : void {


The input component doesn't like this, the event is creating has a target.value of type string.

So to solve this, we can either explicitly set the generic type, or be aware of when and how TypeScript is going to infer the generic type.

Top comments (0)

The AI Brief

AI generated git commit messages

Minimize the struggle of remembering what you just coded. AI-generated commits make it easier to manage projects and keep track of changes. The Nutlope/aicommits project demonstrates how AI can improve commit messages.

I open sourced an AI that creates any UI in seconds

Make AI-generated user interfaces a breeze. This open-source project harnesses the power of generative AI technologies like chatGPT to create versatile, quick, and intuitive UI components.

Use AI to commit like a PRO in 1 second

Upgrade your commit message game with AI. Boost your productivity by using ChatGPT to generate commit messages and avoid context switching. OpenCommit is an open-source library that helps you achieve this easily.

Build your own ChatGPT starter kit

Train AI models on custom data for improved domain-specific knowledge. Combine the power of WebView technologies and this starter kit to train your ChatGPT model on specific websites, allowing for better-optimized outcomes.