Closed5
ReactでContext APIを導入する前にやるべきprops drilling（バケツリレー）の解消法
よぺ悩み
- コンポーネントを深くネストしたときに、下層コンポーネントまでステートや更新関数をバケツリレーするのが大変
- リファクタリング時にバケツリレーに関わる全てのコンポーネントの修正が必要
- 信頼できる情報源として、データおよびロジックはカスタムフック内でまとめておきたい
- Context API以外の解決方法を模索したい
- props drilling問題に陥らない設計パターンを見つけたい
助けてくれた記事たち
よぺキーワード
- Composition
よぺ解決方法
Compositionを使って親と子のコンポーネント間の距離を縮めアクセス性を確保する
よぺprops drillingの問題点
コンポーネントのネストが深すぎた場合を前提として、
- propsを使う子コンポーネントまでバケツリレーするのが大変である
- WEBアプリの規模が大きくなったときに、propsの数が増えて命名や引数の設定などメンテナンスが困難になる
よぺ解決方法: Compositionで親と子のコンポーネントの距離を縮め、子要素へのアクセスを確保する
このスクラップは2024/03/24にクローズされました