DEV Community

Cover image for Understanding useState in TypeScript React
Harshal Ranjhani for CodeParrot

Posted on • Originally published at codeparrot.ai

Understanding useState in TypeScript React

If you're working with React and TypeScript, you've likely come across the useState hook. useState is a fundamental React hook that allows you to add state to functional components. In a type-safe environment like TypeScript, it's essential to understand how to use useState effectively. We'll explore how useState in Typescript differs from it's JavaScript counterpart and how to use Typescript's type system to write more robust and maintainable code.

Basic usage of useState in TypeScript

Starting with the simplest case, typescript can infer the type of the state based on the initial value:

const [count, setCount] = useState(0); // type is inferred as number
const [text, setText] = useState(''); // type is inferred as string
Enter fullscreen mode Exit fullscreen mode

However, we need to explicitly define the type when dealing with more complex state:

const [user, setUser] = useState<User | null>(null);
Enter fullscreen mode Exit fullscreen mode

In this example, User is an interface or type that defines the shape of the state. By providing the type parameter <User | null>, we tell TypeScript that the state can be either a User object or null.

Type Inference vs Explicit Types

When working with typescript you will often feel the need to not use explicit types, but it's important to know when to use them. Explicit types can make your code more readable and maintainable, especially when working in a team or on a large codebase.

We use explicit types when:

  • the initial value is null or undefined
  • working with complex state objects
  • we want to enforce a specific type
type Status = 'idle' | 'loading' | 'success' | 'error';
const [status, setStatus] = useState<Status>('idle');
Enter fullscreen mode Exit fullscreen mode

We use type inference when:

  • the initial value clearly indicates the type
  • working with primitive types
  • the state has a simple structure
const [isLoading, setIsLoading] = useState(false);
const [count, setCount] = useState(0);
Enter fullscreen mode Exit fullscreen mode

Working with complex state types

useState in Typescript is crucial when working with complex state objects. Let's look at some common scenarios:

Arrays

Defining the type of an array state:

const [items, setItems] = useState<string[]>([]);
// or let TypeScript infer
const [numbers, setNumbers] = useState([1, 2, 3]);
Enter fullscreen mode Exit fullscreen mode

Defining the type of an array of objects:

interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

const [todos, setTodos] = useState<Todo[]>([]);
Enter fullscreen mode Exit fullscreen mode

Objects

Defining the type of an object state:

interface User {
  name: string;
  age: number;
}

const [user, setUser] = useState<User>({ name: '', age: 0 });
Enter fullscreen mode Exit fullscreen mode

Defining objects with optional properties:

interface FormData {
  username: string;
  email: string;
  age?: number;
}

const [formData, setFormData] = useState<FormData>({
  username: '',
  email: ''
});
Enter fullscreen mode Exit fullscreen mode

Common patterns and best practices

Discriminated Unions:

When dealing with different states of data, use discriminated unions to ensure type safety:

type RequestState<T> = 
  | { status: 'idle' }
  | { status: 'loading' }
  | { status: 'success'; data: T }
  | { status: 'error'; error: string };

function useData<T>() {
  const [state, setState] = useState<RequestState<T>>({ status: 'idle' });
  // ... rest of the logic
}
Enter fullscreen mode Exit fullscreen mode

Here, the RequestState type ensures that the data property is only available when the status is 'success'. When the status is 'error', the error property is made available.

Type Guards with useState

Tye guards help TypeScript understand the type of the state and prevent runtime errors.

interface User {
  id: number;
  name: string;
}

const [user, setUser] = useState<User | null>(null);

// Later in your code
if (user) {
  // TypeScript knows user is not null here
  console.log(user.name);
}
Enter fullscreen mode Exit fullscreen mode

Here, TypeScript knows that user is not null inside the if block, thanks to the type guard. This prevents runtime errors when accessing properties of user.

Updater Functions

When using the updater functions from useState, it's important to provide the correct type for the new state value:

const [count, setCount] = useState(0);

// TypeScript infers the correct type for prevCount
setCount(prevCount => prevCount + 1);

// For complex objects
const [user, setUser] = useState<User>({
  id: 1,
  name: 'John'
});

setUser(prevUser => ({
  ...prevUser,
  name: 'Jane'
}));
Enter fullscreen mode Exit fullscreen mode

Here, TypeScript infers the correct type for prevCount and prevUser based on the initial state value. This ensures type safety when updating the state.

Error Prevention

Using useState in typescript helps prevent common errors and indicates potential issues at compile time. By providing explicit types and using type guards, you can catch errors early in the development process.

interface User {
  id: number;
  name: string;
}

const [user, setUser] = useState<User>({
  id: 1,
  name: 'John'
});

// TypeScript will error on this:
setUser({ 
  id: 2 
  // Error: Property 'name' is missing
});
Enter fullscreen mode Exit fullscreen mode

Conclusion

Understanding how to properly use useState in TypeScript React components is essential for building type-safe applications. While it might seem like extra work at first, the benefits of catching errors at compile-time rather than runtime make it worth the effort. Remember to use the type inference when possible, but don't shy away from explicit types when they make your code more maintainable and self-documenting.

Whether you're starting a new project or maintaining an existing one, mastering useState in TypeScript will help you write more reliable React applications with fewer runtime errors. You can read more about typescript here.

Top comments (1)

Collapse
 
jangelodev profile image
João Angelo

Hi Harshal Ranjhani,
Top 5, very nice and helpful !
Thanks for sharing.