Prop Drilling

How To Avoid Prop Drilling in React Using Component Composition

Prop drilling happens when you pass props through multiple components just to reach a deeply nested child. To avoid this, component composition lets you build reusable components that wrap or contain others, so you can pass data or behavior directly without going through many layers.

Instead of passing props down a long chain, you can use patterns like:

• Children as a prop – to pass content into reusable wrapper components.

• Render props – functions as children to control what gets rendered.

• Context API – for sharing state across components without manual prop passing.

Using composition keeps components separated, encourages reuse, and results in cleaner, more scalable code.