What is the difference between props drilling and using contextual data in React?

What is the difference between props drilling and using contextual data in React?

• A. Props drilling passes props through intermediate components; Context provides data to nested components without explicit prop passing.
• B. Context provides data to nested components only if you pass a prop.
• C. Props drilling uses context to avoid passing props.
• D. Context eliminates the need for props entirely.

Answer: (A)

It's about how data moves through a React component tree. Prop drilling happens when you pass a value down through intermediate components that don’t use it themselves, just to reach a deeper component that needs it. This can clutter those intermediate components and make changes harder because you have to touch every level of the tree even if most components aren’t using the data. Context offers a different approach: you provide a value once with a Provider at some level, and any descendant can access that value directly, without it being passed as a prop through every intermediate component. Components read the value with useContext (or a Consumer) and can react to changes in that context. This pattern is ideal for things many parts of the UI rely on, like theme, locale, or the current user. It’s not a universal replacement for props; use it when many components need the data or when prop drilling would become too cumbersome. Just be mindful that changing context can trigger re-renders in all consuming components, so use it judiciously to avoid unnecessary updates.

It's about how data moves through a React component tree. Prop drilling happens when you pass a value down through intermediate components that don’t use it themselves, just to reach a deeper component that needs it. This can clutter those intermediate components and make changes harder because you have to touch every level of the tree even if most components aren’t using the data.

Context offers a different approach: you provide a value once with a Provider at some level, and any descendant can access that value directly, without it being passed as a prop through every intermediate component. Components read the value with useContext (or a Consumer) and can react to changes in that context.

This pattern is ideal for things many parts of the UI rely on, like theme, locale, or the current user. It’s not a universal replacement for props; use it when many components need the data or when prop drilling would become too cumbersome. Just be mindful that changing context can trigger re-renders in all consuming components, so use it judiciously to avoid unnecessary updates.