Set types on useState React Hook with TypeScript

🎣 Hooking Types with useState in React and TypeScript

Are you diving into the world of React hooks with TypeScript, but getting stuck on setting the types for the useState hook? Don't worry, you're not alone! In this blog post, we'll tackle the common issue of setting types on useState with TypeScript and provide you with easy solutions. Let's get started! 😎

The Challenge: Setting Types on useState with TypeScript

Here's the scenario: You're working on a React project with TypeScript and you want to utilize the useState hook to manage the state of your components. However, you're struggling to figure out how to set the typings of the destructured elements. Let's take a closer look at the example provided:

interface IUser {
  name: string;
}

const [user, setUser] = useState({name: 'Jon'});

In this example, you have an interface IUser which defines the shape of the user object. You want to enforce that the user variable matches the IUser type. So, how can we achieve this?

Solution: Two-Phase Typing

The author of the question mentioned a successful two-phase approach for this problem - typing and then initializing. Here's an example:

let user: IUser;
let setUser: any;
[user, setUser] = useState({name: 'Jon'});

This solution does the job, but it doesn't feel elegant nor optimal. We can improve it!

A Better Solution: Providing Initial Values

Instead of using the two-phase approach, React provides a handy feature that allows you to provide initial values when using the useState hook. To set the proper typing, you can directly pass the initial value as the generic type parameter for useState. Here's how you can do it:

const [user, setUser] = useState<IUser>({name: 'Jon'});

By specifying <IUser> after useState, you're telling TypeScript to infer and enforce that the initial state of user should match the IUser interface. This is not only cleaner but also more straightforward!

Handling Functions Generated by useState

The question also raises another concern: how to enforce the correct typing for the setUser function. Ideally, we want setUser to be initialized as a function that takes an IUser as input and returns nothing. Here's how you can achieve that:

const [user, setUser] = useState<IUser>({name: 'Jon'});
const updateUser = (newUser: IUser) => setUser(newUser);

By specifying const updateUser = (newUser: IUser) => setUser(newUser), you're creating a separate function updateUser with the correct typing. Now, you can use updateUser to update user and TypeScript will ensure you're passing the right value.

Embracing TypeScript for Props-Dependent Initialization

Lastly, the original question mentioned the desire to take advantage of TypeScript to force type checking during initialization, especially when it depends on some props. To achieve this, simply refer to the prop type when providing the initial value. Here's an example:

interface IUserProps {
  name: string;
}

const UserComponent: React.FC<IUserProps> = ({ name }) => {
  const [user, setUser] = useState<IUser>({name});
  // ...
};

In this example, we define a component UserComponent that receives a prop name of type string. When initializing user with useState<IUser>({name}), TypeScript will enforce that the value passed matches the name prop type.

Ready, Set, TypeScript!

With these easy solutions, you should now have no issues when setting types on a useState React hook with TypeScript. Remember to leverage the two-phase typing approach or take advantage of the initial value generics provided by React. Additionally, don't forget to properly type the functions generated by useState for a flawless development experience.

If you have any further questions or cool tips, we'd love to hear them in the comments below. Let's embrace TypeScript in our React projects and level up our type game together! 💪🚀