TypeScript React Hooks, custom hook type inference issue

Question

So I have this custom hook to decode a token

export function useToken(initial: string) {
  const [token, setToken] = useState<string>(initial)
  const [decoded, setDecoded] = useState<Token>()

  useEffect(() => {
    if (token) {
      const value = decodeToken(token)
      if (isTokenExpired(value)) {
        setDecoded(undefined)
      } else {
        setDecoded(value)
      }
    } else {
      setDecoded(undefined)
    }
  }, [token])

  return [decoded, setToken]
}

The return type looks good, here a

[Token, React.Dispatch<React.SetStateAction<string>>]

I have another hook that uses this hook, but it's seeing the return type incorrectly

export function useUser() {
  const [decoded, setToken] = useToken(getTokenFromStorage())
  //...

Here useToken gives both decoded and setToken the same type of

Token | React.Dispatch<React.SetStateAction<string>>

i.e.

decoded: Token | React.Dispatch<React.SetStateAction<string>>, setToken: Token | React.Dispatch<React.SetStateAction<string>>

What am I doing wrong...

FabianCook · Accepted Answer · 2019-06-17 01:32:22Z

6

I got the same issue the other day!

You have to be explicit with the return type, as Typescript isn't inferring the type correctly.

For example:

export function useToken(initial: string): [Token, React.Dispatch<React.SetStateAction<string>>] {
}

That should fix it... I think it is a typescript bug so probably an issue needs to be made for it.

answered Jun 17, 2019 at 1:32

FabianCook

20.6k17 gold badges72 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arun kumar · Accepted Answer · 2021-12-12 16:30:57Z

4

You may try to use "as const" at the end of the return. This is resolve issue.

return [decoded, setToken] as const

for more info check "const assertions"

edited Dec 12, 2021 at 16:30

answered Dec 12, 2021 at 16:25

Arun kumar

1,0915 gold badges21 silver badges43 bronze badges

Collectives™ on Stack Overflow

TypeScript React Hooks, custom hook type inference issue

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related