Hooks 11 exercises
Problem

Typing the useCallback Hook

In this exercise, we are going to look at an issue with the useCallback function.

Here's our current code:


export const Buttons = (props: { id: string }) => {
const onClick = useCallback<string>(
(buttonName) => {
console.log(props.id, buttonName);
},
[props.id]

Loading exercise

Transcript

0:00 In this exercise, we're going to look at useCallback. UseCallback here, we're trying to do something a bit funny with it, which is we're saying useCallback, we're passing in a string, and we're expecting this buttonName here to be a string. In fact, it implicitly has an any type.

0:16 OK, this is a little bit intriguing. We're basically saying useCallback should take in a buttonName as its type, and it should return nothing, so it should return void. That's what this test is doing. It's expecting that onClick here is Equal typeof onClick, buttonName, string, void. Currently, it's just being typed as string.

0:37 Your job here is to figure out what's going on, how we can alter this typing here to make sure it works, because something's definitely going wrong here.