Zenn
Open3

Reactのpropsを分割代入する理由をまとめる

React
かがんかがん

理由

不使用プロパティに気づきやすくなる

export const SampleButton = ({
  onClick,
  // onUpdate を使っていないのが不使用変数として検出できる
  onUpdate,
}: {
  onClick: () => void;
  onUpdate: () => void;
}) => {
  return <button onClick={onClick}>SampleButton</button>;
};

ただし、 props で渡す場合でも、 react/no-unused-prop-types ルールで検出できる。

コード
// onUpdate を使っていない
export const SampleButton = (props: { onClick: () => void; onUpdate: () => void }) => {
  return <button onClick={props.onClick}>SampleButton</button>;
};

VSCodeのスクリーンショット。内容は前述のコード。ESLintによって、未使用propsの警告が表示されている。

デフォルト値を設定できる

オプショナルにしたpropsのデフォルト値を設定できる。
これにより、undefined時の処理を明示できる。

const SampleButton = ({ isDisabled = false }: { isDisabled?: boolean }) => {
  return <button disabled={isDisabled}>sample</button>;
};

記述量がコードスメルになる

分割代入が面倒なくらいプロパティが多くなってきたら、それはコンポーネントの分割が適切にできていない合図。

"use client" すべきでないのを教えてくれる

"use client" は Server Component と Client Component の境界に設定するべきディレクティブです。
このへんの説明は以下の記事が詳しいので割愛します。

https://zenn.dev/luvmini511/articles/ec0e874a2cc1f1

分割代入しておくと、 "use client" しているコンポーネントのpropsで関数を受け取っているとTypeScriptの警告が出ます。
この場合は "use client" を外すべきです（親が "use client" されているべき）。

"use client";

export const SampleButton = ({ onClick }: { onClick: () => void }) => {
  return <button onClick={onClick}>SampleButton</button>;
};

VSCodeのスクリーンショット。内容は前述のコード。onClickに対してTypeScriptの警告が表示されている

props で使った場合には何も教えてくれない。

"use client";

export const SampleButton = (props: { onClick: () => void }) => {
  return <button onClick={props.onClick}>SampleButton</button>;
};

VSCodeのスクリーンショット。内容は前述のコード。警告がない