Container/Presentational

Définition

Pattern qui sépare les composants en deux types : Container (logique, data fetching) et Presentational (UI pure, reçoit des props). Moins pertinent avec les hooks.

Analogie

Comme un réalisateur (container) et un acteur (presentational) : l'un dirige, l'autre joue le role.

Exemple de code

// Presentational : UI pure
function UserCard({ name, avatar }) {
  return <div><img src={avatar} /><p>{name}</p></div>;
}
// Container : logique
function UserCardContainer({ userId }) {
  const { data } = useQuery({ queryKey: ['user', userId], queryFn: fetchUser });
  return <UserCard name={data?.name} avatar={data?.avatar} />;
}

Cas d'usage

Rendre les composants UI réutilisables et testables en les séparant de la logique.

Termes liés