When building reusable logic in React, you often create custom hooks. Typing these hooks with TypeScript ensures that both their parameters and return values are used safely, making them robust and easy to maintain. To see how this works in practice, consider a custom hook that manages a boolean toggle state. You want to type both the initial value parameter and the returned state and toggle function.

Begin by defining the hook's parameter and return types. The parameter, initial, should be a boolean. The hook will return a tuple: the current boolean state and a function to toggle it. Here is a step-by-step example of how you might write and type such a custom hook:

import { useState } from "react";

function useToggle(initial: boolean): [boolean, () => void] {
  const [value, setValue] = useState<boolean>(initial);
  const toggle = () => setValue((v) => !v);
  return [value, toggle];
}

// Usage
const [isOpen, toggleOpen] = useToggle(false);

In this example, the useToggle hook takes an initial boolean value. The return type is a tuple: the current value (a boolean) and a function that toggles that value. By specifying these types, TypeScript will warn you if you use the hook incorrectly, such as passing a non-boolean initial value or misusing the returned function.