TL;DR
コンポーネントを、表示するデータを扱う Container と、データの見せ方を扱う Presentational に分けるデザインパターン。コンポーネントの関心の分離を促す。
仕組み
Container は、どのようなデータをユーザに表示するかを管理するコンポーネントである。取得したデータを Presentational コンポーネントに渡す。自分ではレンダリングを行わないので、通常はスタイルを持たない。
Presentational は、データをユーザにどのように表示するかを管理するコンポーネントである。Container から Props で受け取ったデータを変更せず、スタイルも含めて意図どおりに表示する。同じ入力に対して同じ出力を返す純粋関数として書ける。
React では、Container の役割をカスタムフックに持たせることもできる。ただし、Container からそのカスタムフックを呼び出す形にすることも多い。
例
React 以外の Vue や Svelte にも適用できる。Vue では、Container の役割に Composable を使う。
関連
出典
- Container/Presentational Pattern - patterns.dev
- https://qiita.com/andmorefine/items/26739269851ad785658f#コンテナプレゼンテーションパターン
- https://zenn.dev/morinokami/books/learning-patterns-1/viewer/presentational-container-pattern
- https://zenn.dev/cybozu_frontend/articles/design-patterns-in-react#presentational%26containerパターン