グローバルナビゲーションへ

本文へ

フッターへ

お役立ち情報Blog



Reactのprops drilling(バケツリレー)とhooksに我々はどう立ち向かっていけばよいのか

最近Reactに入門しました。

アプリケーションの規模が大きくなってくると問題になってくる一つにprops drilling(バケツリレー)と呼ばれるものがあります。

今回はprops drilling(バケツリレー)が“つらい”と思ってから、どのように立ち向かっていったのか一例をご紹介します。

Reactのprops drilling(バケツリレー)が“つらい”

Reactコンポーネントの引数にPropsを渡す方法では、親子関係にあるコンポーネントのツリー構造の間を飛ばして渡すことができません。
※ただし、Context APIRedux 等のステート管理ライブラリを使えば可能です。

親、子、孫、ひ孫とコンポーネントツリー構造が深くなってくると、ひ孫コンポーネントでのみ必要なPropsなのに、子・孫コンポーネントではただ下のコンポーネントにPropsを渡すためだけにProps定義することがしばしば発生します。

上記は極端な例ですが、ひ孫コンポーネントで必要なステートと更新用関数をProps経由で渡しています。

ひ孫で必要なPropsの変更に親、子、孫、ひ孫と複数のコンポーネントに修正が必要になったり、TypeScriptの型定義が冗長になったりとつらいです。

children Props , component Props

こういった時に役立つのが公式のドキュメントにも記載されているCompositionです。

先程の例を書き直してみます。

子、孫コンポーネントからひ孫コンポーネントでしか使わないPropsを無くすことができました。

複数のコンポーネントを指定した位置に表示させたい時にはPropsにコンポーネントを渡すこともできます。

※React公式ドキュメントより引用

ロジックが散らばって“つらい”

最初の例ではステートの更新用関数をPropsで渡して、実際の更新処理はひ孫のコンポーネントで定義していました。

※再掲

同じステートをincrement, decrementしたい別のコンポーネントが必要になった場合に、都度更新用関数をコピペして作らなければならなくなります。

こういったことを防ぐために、なるべくステート定義と同じモジュール内でステート更新用関数を定義しておきたいです。

コンポーネントのPropsが増えると“つらい”

Props childrenを使ってprops drilling(バケツリレー)を解決しても新たな問題が出てきたりします。

これもまた極端な例ですが、複数のステートや更新用関数を扱うようになってくるとコンポーネントの引数が増えていってつらいです。

カスタムフックでステートと更新操作をまとめる

カスタムフックでステートと更新操作をオブジェクトにまとめてしまいます。

カスタムフックでオブジェクトにステートと更新用関数をまとめることで、カスタムフックを使うコンポーネントを見るとだいぶスッキリします。

Propsで渡された子コンポーネントでの書き方はこんな感じになります。

さいごに

props drilling(バケツリレー)、ロジックが散らばる、コンポーネントのPropsが増えてきてつらいのを経験して、考えた末こういった形に一旦落ち着きました。

PHPer脳ではデータ(ステート)と手続き(更新用関数)が一箇所にまとまっているこのような形式がPHPのclassを使ったオブジェクトのような形で見通しがいいように思えるのですが、みなさんどうしているんでしょうか。

この形式が最適解ではないと思っていますが、現在進行形でprops drilling(バケツリレー)がつらいと思っている方の一助になるとうれしいです。

The following two tabs change content below.

美髭公

ソリューション事業部 システムエンジニア
2013年にアーティスに入社。システムエンジニアとしてアーティスCMSを使用したWebサイトや受託システムの構築・保守に携わる。環境構築が好き。
この記事のカテゴリ

FOLLOW US

最新の情報をお届けします