Heading 1

h3 titleh4

h5

h6

‍

1. rgrg
2. rge

• fefef
• efef
• vwvwr

‍

When the React library was introduced into the community some years back, it was accepted and soon gained lots of popularity as the choice for building out user interfaces in a composable way. The major idea was that each UI interface can be split into multiple different small components and at the end of the day, these components can be combined or composed to form the whole larger UI as intended.

class App extends React.Component { 
render() { 
return ( 
      <ColorContext.Provider value="white"> 
      <SampleComponent /> 
      </ColorContext.Provider> 
    ); 
  } 
} 

As a background to what we are trying to present, if we were building multiple UI components for example, we indeed have a component tree which includes the parent component, which becomes the source of truth for our data, and due to the interrelation dependence on the parent components and those underneath it known as the children or descendant descendant descendant descendant descendant component to share data, it comes a point where this becomes an issue.

As we stated earlier, for small to medium apps, sharing data across many different components could be easy, since all we need to do is pass this data or props across or down from the parent to every child that needs it. Now this is fine. What if we have a hugely nested or a large component tree and we intend to pass the data or prop down this tree?

React context, a core React API provides an easier interface for developers to share data or pass props down multiple levels deep in our React applications. From the React docs, with react context, we can easily pass data down to the very component that needs it at any level in the component tree, without having to explicitly pass this data down each component level in the tree. This is all there is to React context.

To drive this definition further for more clarity, say you have a particular theme color set at the parent component level of the app, and you only intend to pass it down to the thirtieth component down the tree, without having to pass it down every level until you get to that thirtieth level, but just pass it down to only the thirtiet