Container/Presentational

Definition

Pattern qui separe les composants en deux types : Container (logique, data fetching) et Presentational (UI pure, recoit des props). Moins pertinent avec les hooks.

Analogie

Comme un realisateur (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 reutilisables et testables en les separant de la logique.

Termes lies