Wrapping React.useState with TypeScript

Photo by Daiga Ellaby

How to make a custom hook that wraps useState with TypeScript properly

I made a useDarkMode hook that looks like this:

Then it is used like this:

This works great, and powers the "dark mode" support for all the Epic React workshop apps (for example React Fundamentals).

A closer look

I want to call out a few things about the hook itself that made things work well from a TypeScript perspective. First, let's clear out all the extra stuff and just look at the important bits. We'll even clear out the TypeScript and add it iteratively:

From the get-go, we've got an error when calling setMode:

You can read each addition of indentation as "because", so let's read that again:

This expression is not callable. Because not all constituents of type 'string | React.Dispatch<SetStateAction<string>>' are callable. Because type 'string' has no call signatures.(2349)

The "expression" it's referring to is the call to setMode, so it's saying that setMode isn't callable because it can be either React.Dispatch<SetStateAction<string>> (which is a callable function) or string (which is not callable).

For us reading the code we know that setMode is a callable function, so the question is: why is the setMode type both a function and a string?

Let me rewrite something and we'll see if the reason jumps out at you:

The array in this case has the following type:

So the array that's being returned from useDarkMode is an Array with elements that are either a string or a React.Dispatch type. As far as TypeScript is concerned, it has no idea that the first element of the array is the string and the second element is the function. All it knows for sure is that the array has elements of those two types. So when we pull any values out of this array, those values have to be one of the two types.

But React's useState hook manages to ensure when we extract values out of it. Let's take a quick look at their type definition for useState:

Ah, so they have a return type that is an array with explicit types. So rather than an array of elements that can be one of two types, it's explicitly an array with two elements where the first is the type of state and the second is a Dispatch SetStateAction for that type of state.

So we need to tell TypeScript that we intend to ensure our array values don't ever change. There are a few ways to do this, we could set the return type for our function:

Or we could make a specific type for a variable:

Or, even better, TypeScript has this capability built-in. Because TypeScript already knows the types in our array, so we can just tell TypeScript: "the type for this value is constant" so we can cast our value as a const:

And that makes everything happy without having to spend a ton of time typing out our types 😉

And we can take it a step further because with our Dark Mode functionality, the string can be either dark or light so we can do better than TypeScript's inference and pass the possible values explicitly:

This will help us when we call setMode to ensure we not only call it with a string, but the right type of string. I also created type aliases for this and the dispatch function to make the prop types easier as I pass these values around my app.

Hope that was interesting and helpful to you! Enjoy 🎉