props drillingで失敗したReact初心者がレビューで学んだComposition Patternの話 - Qiitaはじめに Reactでアプリを作っていると、こんな状況に出くわしませんか？ 「あれ、このドロップダウンメニュー、ヘッダーでも一覧でも使ってるけど、微妙に項目が違うだけでほぼ同じUIだな...」 私もそうでした。同じようなコンポーネントが複数箇所に散らばっていて、修正するたびに両方を直さないといけない。これはリファクタリングのチャンスだと思い、共通化に挑戦しました。 結果として、props drillingという罠にハマり、先輩のレビューで指摘されて初めて「Composition Pattern」と「Context」の正しい使い方を学びました。 この記事では、私の失敗から学んだことを共有します。 最初の実装（失敗） やりたかったこと ActionMenu を共通コンポーネントにする ヘッダーと一覧で表示する項目を切り替えられるようにする 最初に書いたコード // ItemActionMenu
