# Context Intro

## The Problem with P**rop Drilling**

Until now the only way to pass data to a component's sibling was to move state to a higher component and then pass it back down to the sibling via props. This process is known as **prop drilling** and can be tedious and time-consuming.

![Prop Drilling](https://109962327-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MC0Wq3Hv_Fc0WRkNF0M%2F-ME_eOJTkpU45EWgPJx6%2F-ME_fjgXstmHiQ7xk9Wc%2Fprop-drill.png?alt=media\&token=f73aed08-991f-49df-836c-1e6d5aeaab89)

## Using Context to Avoid Prop Drilling

This is where `Context` comes in. It uses a `Provider` which is a common parent of the elements which need the data and a `Consumer` which is wrapped around the components which need the data.

![Use of Context](https://109962327-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MC0Wq3Hv_Fc0WRkNF0M%2F-ME_eOJTkpU45EWgPJx6%2F-ME_geMzw4Y1vJF_U9EW%2Fuse-context.png?alt=media\&token=05060f23-6c05-4433-a546-8ba6385d8d8f)

{% hint style="info" %}
React passes data through the component tree via the `Provider/Consumer` pair without having to pass `props` down through every level.
{% endhint %}
