It All Depends on Context…

Image for post
Image for post

My last two weeks have been spent learning React. This has meant learning how to use components to design the front-end of applications. Components allow you to split up front-end code into reusable chunks that are each specialized in what they do. They are each responsible for one thing.

Components working together in the application require the transfer of data through props. Data is passed top-down (from parent to child components) and this requires some thought to decide who stores what data and how do we pass it to where it needs to go?

With larger React apps with many nested components and a complicated tree relationship between them, passing data through props can be hard to keep track of. Props may need to be passed down a long chain before they are needed, or many lower-level components may need the same props. This can result in many components holding on to props that they aren't using and only passing down. Hmm this sounds like a lot of hoarded useless information…

Lets cut out the middle man! What if there was a way to directly send the props from where they are to the components that need them. ‘Context’ in React allows for just that. Let's lessen our baggage with context!

Context provides a way to pass data through the component tree without having to pass props down manually at every level. — React Docs

When Context Can Be Helpful:

  1. In React apps with many components nested within each other resulting in props needing to be passed down many levels
  2. When multiple components require the same props, such as current authenticated user, theme, or preferred language

How to Use Context:

Step 1. Create the context

The context is commonly created in a separate js file and then imported where needed. A default value can be optionally set on creating the context.

const NewContext=React.createContext()
const AnotherContext=React.createContext('defaultValue')

Step 2. Provide a Context Value

Wrap the component where you want to pass down the prop with the Context.Provider. Note that is it important where you provide the context because only descendant components will be able to ‘consume’ it. Then set the value to set the data:

<NewContext.Provider value="passedData">
<SomeChildComponent>
</NewContext.Provider>

Step 3: Consume the context value

Now in SomeChildComponent and any children of that component you can “consume” the context. There are two ways to access the data in the low-level component:

First, the Context.Consumer is passed a function as its child that will receive the context value as its parameter. Then may then use the value as needed.

<NewContext.Consumer value="passedData">
{
(passedData) => <p> {passedData}</p>
}
</NewContext.Consumer>

For the second method, the context must be set (inside or outside the component class) using contextType and then accessed in the component class using this.context. Though this can make for cleaner code, the downside is this only works on class components and the component will only be able to read one context.

export class SomeComponent extends React.Component {   //static contextType=NewContext   render() {
return ({this.context})
}
}
SomeComponent.contextType=NewContext

Note: although setting your props essentially as a global variable through context may make it easy to access data, careful of its usage. This can make your lower-level components more flexible than needed and the control of data flow may be jeopardized.

References:

https://www.youtube.com/watch?v=j3j8St50fNY

https://reactjs.org/docs/context.html

Written by

I love seafood, exploring new cities, board games and learning to love to code. https://github.com/sarakhandaker/portfolio

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store