React

Props drilling problem - Hoe voorkomen met Context?

Props diep doorgeven is inefficient. Context API helpt.

Home/Categorieën/React/Props drilling problem - Hoe voorkomen met Context?

Props drilling probleem

Passing data door veel componentlagen Components onnodig afhankelijk van props Hard to maintain als structuur verandert

Oplossing: Context + Hook

createContext voor shared data Provider hoog in tree Child componenten gebruiken useContext hook Way cleaner dan prop drilling

Code Voorbeelden

JAVASCRIPTProps drilling vs Context
// ❌ Props drilling
<App user={user}>
  <Header user={user} />
    <Nav user={user} />
      <Profile user={user} />

// ✅ Context solution
const UserContext = createContext();

function App({ user }) {
  return (
    <UserContext.Provider value={user}>
      <Header />
      <Nav />
      <Profile />
    </UserContext.Provider>
  );
}

// Deep in tree, use context:
function Profile() {
  const user = useContext(UserContext);
  return <div>{user.name}</div>;
}

Relevante trefwoorden

props drillingcontextcomposition
← Terug naar ReactAlle categorieën →