Prop drilling : quand il pose problème et quand il convient

Bienvenue

Qu'est-ce que la transmission en cascade des propriétés ?

// Middle component: receives 'user' only to pass it down
function Layout({ user }) {
  return <Sidebar user={user} />;
}
// Sidebar: receives 'user' only to pass it down
function Sidebar({ user }) {
  return <UserAvatar user={user} />;
}
// UserAvatar: actually uses 'user'
function UserAvatar({ user }) {
  return <img src={user.avatarUrl} />;
}

Quand la transmission en cascade convient

Signes indiquant que la transmission pose problème

Refactorisation avec la composition de composants

// Instead of drilling 'user' through Layout → Sidebar → UserAvatar,
// render UserAvatar at the top level and pass it as a slot:
function App() {
  return <Layout sidebar={<UserAvatar user={user} />} />;
}

La composition de composants réduit le couplage

Quand utiliser Context

Quand utiliser une bibliothèque d'état

Le flux de données inversé

Flux de décision

Vérification rapide

Récapitulatif

À suivre