1

In a basic React custom hook in which the only difference is returning with [ ] or { }:

const useCustomHookSquare= () => {
  const [state, setState] = useState<Type>(initialState);

  return [state, storeBounceBox];
}

const useCustomHookCurly= () => {
  const [state, setState] = useState<Type>(initialState);

  return {state, storeBounceBox};
}

This works:

const {state, setState} = useCustomHookCurly();
// or even
const {setState} = useCustomHookCurly();

But doing the exact same thing deconstructing with square brackets gives me a TypeScript error when calling the setState function (or any other function exported this way):

const [state, setState] = useCustomHookSquare();
setState(someState); // "This expression is not callable. Type has no call signatures".

I feel like there is some basic JavaScript concept I'm missing here. Why does the {} version allow me to call the function but the [] version doesn't?

HigoChumbo
  • 858
  • 2
  • 9
  • 23

2 Answers2

3

Because your useCustomHookSquare hook has no return type information TypeScript infers that it returns an array of two different types. But not both of the types that can be part of that array are functions, so you get a type error because one of the possible values isn't callable.

const useHook = () => {
  return ["item", () => true]
}

// The inferred value of useHook is now
//
// (string | (() => boolean))[]
//
// So when calling `fn`, TypeScript doesn't know if it will be a string or a function
const [item, fn] = useHook()

//This expression is not callable.
//  Not all constituents of type 'string | (() => boolean)' are callable.
//    Type 'string' has no call signatures.
fn()

Add some return types to your useCustomHookSquare function to fix the problem. Here's what my fixed example would look like.

const useHook = (): [string, () => true] => {
  return ["item", () => true]
}

TypeScript now understands that the returned array only has 2 items in it, and those items types should always be the same.

Benjamin Parnell
  • 490
  • 2
  • 5
  • Thank you! Any preference between setting the return types as you point out or using `return [state, setState] as const;` as the other user suggested? –  HigoChumbo May 09 '22 at 10:39
  • 1
    I personally prefer specifying return types part of the function definition itself, but both methods achieve the same goal in this case. – Benjamin Parnell May 09 '22 at 11:31
1

By default typescript assigns a wider type to an array. So if you have:

const arr = ["str", 5];

The type will be an array of (string | number)[], not a tuple of [string, number].

To make it a tuple, use as const:

const useCustomHookSquare= () => {
  const [state, setState] = React.useState<string>();

  return [state, setState] as const;
}
marzelin
  • 10,790
  • 2
  • 30
  • 49
  • I see. So is there any reason why I would want to do that instead of just returning it with curly brackets? I am in doubt given that the examples in the React docs always seem to return the state with square brackets. E.g.: `return [state, dispatch];` –  HigoChumbo May 09 '22 at 10:28
  • 1
    when using square brackets there's more flexibility with naming - you don't have to use the same names. – marzelin May 09 '22 at 10:33