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

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

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 ってそこまで連発するようなものでもないと思っていて。

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

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

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