React のコンポジション vs 継承ってPropsにもあるよねという話

例えば Library というコンポーネントを使ったりラップする Wrapper というコンポーネントを作るとき、LibraryのPropsを

type LibraryProps = {
  x: string;
};

としたとき、WrapperのPropsの型を

type Props = {
  a: string;
} & LibraryProps;

や

interface Props extends LibraryProps {
  a: string;
}

のように継承でPropsを作ってWrapper用のPropsとLibraryのPropsを同階層に混ぜてしまい、

const Wrapper: FC<Props> = (props) => <div><Library x={props.x}/></div>;

のように構成するのは拡張性が悪いと思う

より良い形はPropsもコンポジションにした

type Props = {
  a: string;
  libraryProps: LibraryProps;
}

const Wrapper: FC<Props> = (props) => <div><Library {...props.libraryProps}/></div>;

だと思う

この方式のデメリットはObject Propsが毎回新しいのでrendering対象になり、更にデフォルトのshallowな比較関数によるmemo化ができないことで、ちゃんとdeepEqualしないと

のようにrenderingが増えること

将来的には

のようにimmutable構造が追加されたり、

のようにReact memoを自前で管理する必要がなくなれば楽に解決するかもしれない

MUIのdate-pickerのカスタマイズに関してはフラットなPropsで拡張しないといけなくなっていたりして、そういう場合もあるので、どちらが良いかは一概に言えないかもしれない