props はなるべく optional を許容しないようにしたほうが良いよ

2020-11-06

コンポーネントを作成する際、結構やりがちなんですが。

import React, { FC } from "react"; export type HogeProps = { fuga?: string; }; const Hoge: FC<HogeProps> = ({ fuga }) => typeof fuga === "undefined" ? null : <div>{fuga}</div>; export default Hoge;

ケースバイケースではありますが、これってあんまり良いコンポーネントではないと個人的には思っています。

自分が開発を行う際の鉄則の一つとして「条件はなるべく親で潰す」というのがあります。

つまり、単純にこう書き直して。

import React, { FC } from "react"; export type HogeProps = { fuga: string; }; const Hoge: FC<HogeProps> = ({ fuga }) => <div>{fuga}</div>; export default Hoge;

呼び出す親側で判定を行うべきだということですね。

import React, { FC } from "react"; import Hoge from "./Hoge"; import moge from "./moge"; const Piyo: FC = () => { const fuga: string | undefined = moge(); return typeof fuga === "undefined" ? null : <Hoge fuga={fuga} />; }; export default Piyo;

特に下位のコンポーネントではなるべくロジックを避けるべきかなーと。

つまり上位のコンポーネントに複雑な条件分岐やロジックを寄せることによって、コンポーネントの汎用性が高くなります。


そもそも optional ってそこまで連発するようなものでもないと思っていて。

stringnumber 型を持つ変数を初期化する際は、空文字や 0 で初期化すればええやんっていうことが多いです、これはあくまで個人的にですが。

わざわざ optional にするときは、 optional でないと対応できないケースでのみ使うべきかなーと。

そうしないとコードのあちこちで条件分岐を書かないといけなくなっちゃって、大変なことになっちゃいます。

© 2018 kk-web