Set types on useState React Hook with TypeScript

When working with React and TypeScript, one of the most common challenges is setting types on the useState React Hook. The useState Hook allows us to add state to functional components, but without proper types, it can be difficult to ensure type safety and catch errors early on. In this blog post, we will explore different solutions to set types on useState with TypeScript.

Solution 1: Inline Type Annotation

The simplest way to set types on useState is by using inline type annotation. We can explicitly define the type of the state variable when calling the useState Hook. Here’s an example:

import React, { useState } from 'react';

const MyComponent: React.FC = () => {
  const [count, setCount] = useState(0);
  
  // Rest of the component code
}

In the above example, we define the type of the count state variable as number by using the syntax. This ensures that count will always be a number and TypeScript will provide type checking and autocompletion for count and setCount.

Solution 2: Type Inference

Another way to set types on useState is by leveraging TypeScript’s type inference. When initializing the state variable with a value, TypeScript can infer its type automatically. Here’s an example:

import React, { useState } from 'react';

const MyComponent: React.FC = () => {
  const [count, setCount] = useState(0);
  
  // Rest of the component code
}

In this example, TypeScript infers that the type of count is number based on the initial value of 0. This approach is more concise and can save us from explicitly specifying the type. However, it’s important to note that type inference may not always work as expected, especially when the initial value is not provided.

Solution 3: Creating a Custom Type

If we want to set a more complex type on useState, such as an object or an array, we can create a custom type and use it when calling the useState Hook. Here’s an example:

import React, { useState } from 'react';

type User = {
  name: string;
  age: number;
};

const MyComponent: React.FC = () => {
  const [user, setUser] = useState({
    name: 'John Doe',
    age: 25,
  });
  
  // Rest of the component code
}

In this example, we define a custom type called User, which has name and age properties. We then use this custom type when calling the useState Hook to set the type of the user state variable. TypeScript will ensure that user always follows the structure defined by the User type.

These are the three main solutions to set types on useState React Hook with TypeScript. Whether you prefer inline type annotation, type inference, or creating custom types, TypeScript provides powerful tools to ensure type safety and catch errors early on. Choose the approach that best fits your project’s needs and enjoy the benefits of using TypeScript with React!