React.memoを使いつつ型引数を利用する

はじめに

型引数を受け取るコンポーネントにReact.memoを利用するとそのままでは型を渡すことができません。
そのような際の簡単なハックを記載します。

例

以下のコンポーネントがあったとします。

type Props<T> = {
  value: T;
}

const SomeComponent = <T>({ value }: Propd<T>) => {
  return ...
};

React.memoの返り値は型引数に対応していないのでそのままReact.memoを利用すると以下のような定義になりコンポーネントに対して型を渡すことができなくなります。

const Memoized = React.memo(SomeComponent);
// const Memoized: React.MemoExoticComponent<(<T>({}: SomeProps<T>) => JSX.Element)>

<Memoized<number> value={1} />;
// -> TS2558: Expected 0 type arguments, but got 1.

※ この用途であれば<number>を渡さなくても問題ないのですがシンプルな例として記載しています

解決方法

以下のようにすることで対応可能です。

const Memoized = React.memo(SomeComponent) as typeof SomeComponent;

// そのままexportも出来ます
export default React.memo(SomeComponent) as typeof SomeComponent;

シンプルですが利用する頻度も多いと思うので誰かの役に立てるよう残しておきます