Problem with typing a custom hook React/Typescript

Question

I'm having trouble with typing in the following Hook:

import { SetStateAction, useCallback, useEffect, useRef, useState } from 'react';

type Callback<T> = (value?: T) => void;
type DispatchWithCallback<T> = (value: T, callback?: Callback<T>) => void;

function useStateCallback<T>(initialState: T | (() => T)): [T, DispatchWithCallback<SetStateAction<T>>] {
  const [state, _setState] = useState(initialState);

  const callbackRef = useRef<Callback<T>>();
  const isFirstCallbackCall = useRef<boolean>(true);

  const setState = useCallback((setStateAction: SetStateAction<T>, callback?: Callback<T>): void => {
    callbackRef.current = callback;
    _setState(setStateAction);
  }, []);

  useEffect(() => {
    if (isFirstCallbackCall.current) {
      isFirstCallbackCall.current = false;
      return;
    }
    callbackRef.current?.(state);
  }, [state]);

  return [state, setState];
}

export default useStateCallback;

interface InitialState {
    firstName: string
    lastName: string
}

No Typescript errors:

const [state, setState] = useStateCallback<InitialState>({ firstName: 'Bob', lastName: 'Donovan'});
setState({ firstName: 'Claire', lastName: 'Donovan'}, (curState) => {
  console.log(curState) // => { firstName: 'Claire', lastName: 'Donovan'}
});

Typescript error in console.log(curState.firstName):

Property 'firstName' does not exist on type 'SetStateAction'. Property 'firstName' does not exist on type '(prevState: InitialState) => InitialState'.

const [state, setState] = useStateCallback<InitialState>({ firstName: 'Bob', lastName: 'Donovan'});
setState({ firstName: 'Claire', lastName: 'Donovan'}, (curState) => {
  console.log(curState.firstName) // => 'Claire'
});

What is wrong with the typing?

what's the error?

Rogelio
– Rogelio

2020-12-24 09:35:49 +00:00
Commented Dec 24, 2020 at 9:35 — Rogelio
– Rogelio, Commented Dec 24, 2020 at 9:35

tmhao2005 · Accepted Answer · 2020-12-24 10:00:02Z

1

Looks like there're a few typings should be defined again from my understanding:

// The 1st argument would take `T` or `(prevState: T) => T`
type DispatchWithCallback<T> = (value: SetStateAction<T>, callback?: Callback<T>) => void;

// so then `DispatchWithCallback` should only take `T`
function useStateCallback<T>(initialState: T | (() => T)): [T, DispatchWithCallback<T>] {

answered Dec 24, 2020 at 10:00

tmhao2005

17.7k4 gold badges46 silver badges52 bronze badges

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

Collectives™ on Stack Overflow

Problem with typing a custom hook React/Typescript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related