Typescript React でuseRedcuerに関して

Question

export const getUser = () => {
  const [state, dispacth] = useReducer(reducer, InitialState)

  const handleChange = (user: User) => {
    dispacth(change(user))  
  }

  console.log(state);
  return [state, handleChange];
}

import React, { useState } from 'react'
import { getUser } from "hooks/UserReducer";

const Header: React.FC = () => {
  const [state, handleChange] = getUser()
.....
}
export default Header;

上記のコードでなぜか下記のようなエラーがでます。

Line 41:29:  React Hook "useReducer" is called in function "getUser" which is neither a React function component or a custom React Hook function  react-hooks/rules-of-hooks

関数をReact.FCで型定義しているのになぜこのようなエラーが発生するのでしょうか？
また、この解決策などご存知でしたらよろしくお願いします。

Answer 1

カスタムフックを作る場合、useXxxのような関数名にすることが推奨されています。getUserは名前が違うため、「単なる関数」とみなされて、ご提示のようなメッセージが出ます。

カスタムフックの名前を変えるか、チェックを止めるかをしましょう。