【1日1zenn - day1】useCallbackの中でhooksを呼び出したい！

対象エラー

React Hook "useHoge" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function react-hooks/rules-of-hooks

元のコード(雑イメージ)

src/hooks/useOpenProfile.ts

useOpenProfile.ts

export const useOpenProfile = (userId: string) => {
  openProfileModal(userId)
}

プロフィールモーダルを開くopenProfileModal(userId)という処理を実行するhooksとして定義していた

src/features/talkList/hooks.ts

hooks.ts

export const useOpenProfile = (userId: string) => {
  const handleOpenProfileModal = useCallback(
    openProfileModal(userId)
  )
  return handleOpenProfileModal
}

useCallbackの中でhooksは呼べないので、上記だとエラーが出る。

解消後のコード

src/hooks/useOpenProfile.ts

useOpenProfile.ts

export const useOpenProfile = () => {
  const open = (userId: string) => {
    openProfileModal(userId)
  }
  return open
}

useOpenProfileというhooksがそのままopenProfileModalを実行するのではなく、
userIdを引数に取るopen（命名適当）という関数をreturnするようにした。

src/features/talkList/hooks.ts

hooks.ts

const hogehoge = openProfileModal()
export const useOpenProfile = (userId: string) => {
  const handleOpenProfileModal = useCallback(
    hogehoge(userId)
  )
  return handleOpenProfileModal
}

hooksであるopenProfileModal自体はuseCallbackの外で実行しておくことでエラーを回避し、
その返り値である関数のopenをhogehogeに持たせるようにした。
このhogehogeにuserIdを渡して呼び出すように設定すれば完了。
あとは親コンポーネントで const handleOpenProfileModal = useOpenProfile()みたいにやってあげれば、handleOpenProfileModalは引き渡し放題。

まあなんかもっといい設計ありそうだけど。