React Hooks들은 제네릭 타입 함수로 구현되어있다. 각 hook들이 어떤 타입들을 받는지 알아보자.

useState

export function useState<S>(
  initialState: (() => S) | S,
): [S, Dispatch<BasicStateAction<S>>] {
  const dispatcher = resolveDispatcher();
  return dispatcher.useState(initialState);
}

Example

initialState가 들어가 있으면 타입유추가 가능하기 때문에 타입을 생략하고 작성하여도 된다.

const [data, setData] = useState<string>('')
const [data, setData] = useState('')

const [data, setData] = useState([]) // 빈배열을 넣으면 타입이 Object로 나온다

useEffect

export function useEffect(
  create: () => (() => void) | void,
  deps: Array<mixed> | void | null,
): void {
  const dispatcher = resolveDispatcher();
  return dispatcher.useEffect(create, deps);
}

Example

deps에는 다양한 타입이 들어올 수 있다.

useRef

export function useRef<T>(initialValue: T): {|current: T|} {
  const dispatcher = resolveDispatcher();
  return dispatcher.useRef(initialValue);
}