[React] useCallbackで作られる関数に対してgenericを使いたい

問題

import React from "react"
interface Props {}

interface CallbackProps {
  a: number
  b: string
}

interface CallbackReturn {
  c: boolean
}

const Test: React.FC<Props> = (props) => {
  const callback = React.useCallback<(props: CallbackProps) => CallbackReturn>(
    (props) => {
      const {a, b} = props
      
      return {
        c: true,
      }
    },
    []
  )

  const x = callback({ a: 1, b: "弐" })
  console.log('x.c:', x.c)

  return <></>
}
export default Test

useCallback自体にはgenericで型付けが出来るんだけど、ここで言うcallback変数となった関数にはgenericは渡せない。

callback<Generic>(...)  // こうしたい場合

解決

関数を返すuseMemoに切り替える。こうすることでdependencyも使え無駄に関数を生成することはないし、genericを渡せる関数にもなる。

import React from "react"
interface Props {}

interface CallbackProps<T> {
  a: T
  b: string
}

interface CallbackReturn {
  c: boolean
}



const Test: React.FC<Props> = (props) => {
  const callback = React.useMemo(() => function<T>(
    props: CallbackProps<T>
  ): CallbackReturn {
    const { a, b } = props

    return {
      c: true,
    }
  },
  [])

  const x = callback<boolean>({ a: false, b: "弐" })
  console.log('x.c:', x.c)

  return <></>
}
export default Test