--- title: React Context API description: Discover the benefits of using React Context API and avoid having to go through several processes to pass data to different parts of your React component tree. image: https://blog.avenuecode.com/hubfs/negative-space-laptop-touch-coffee-mobile-phone-man-work-desk-office-linkedin.jpg --- [AvenueCode.com](https://avenuecode.com) [News](https://avenuecode.com/news) [Contact](https://avenuecode.com/contact) [![Avenue Code Snippets Logo](https://blog.avenuecode.com/hubfs/Avenue%20Code%20New%20Logos%20-%202023/AC-Snippets---Black.png)](https://blog.avenuecode.com/?hsLang=en-us) *menu* - Technology [Cloud](https://blog.avenuecode.com/blog/topic/cloud?hsLang=en-us) [Delivery Infrastructure](https://blog.avenuecode.com/blog/topic/delivery-infrastructure?hsLang=en-us) [Web Experience](https://blog.avenuecode.com/blog/topic/web-experience?hsLang=en-us) [Agile Mindset](https://blog.avenuecode.com/blog/topic/agile-mindset?hsLang=en-us) [Quality First](https://blog.avenuecode.com/blog/topic/quality-first?hsLang=en-us) [Design](https://blog.avenuecode.com/blog/topic/design?hsLang=en-us) [Solution Architecture](https://blog.avenuecode.com/blog/topic/solution-architecture?hsLang=en-us) [Data & ML](https://blog.avenuecode.com/blog/topic/data-and-machine-learning?hsLang=en-us) [Mobile Experience](https://blog.avenuecode.com/blog/topic/mobile-experience?hsLang=en-us) - [Whitepapers](https://blog.avenuecode.com/blog/topic/whitepapers?hsLang=en-us) - [Spotlight](https://blog.avenuecode.com/blog/topic/spotlight?hsLang=en-us) - [Extraordinary Women in Tech](https://blog.avenuecode.com/blog/topic/extraordinary-women-in-tech?hsLang=en-us) - [Avenue Code Culture](https://blog.avenuecode.com/blog/topic/avenue-code-culture?hsLang=en-us) - [Cloud](https://blog.avenuecode.com/blog/topic/cloud?hsLang=en-us) - [Design](https://blog.avenuecode.com/blog/topic/design?hsLang=en-us) - [Delivery Infrastructure](https://blog.avenuecode.com/blog/topic/delivery-infrastructure?hsLang=en-us) - [Solution Architecture](https://blog.avenuecode.com/blog/topic/solution-architecture?hsLang=en-us) - [Web Experience](https://blog.avenuecode.com/blog/topic/web-experience?hsLang=en-us) - [Data & ML](https://blog.avenuecode.com/blog/topic/data-and-machine-learning?hsLang=en-us) - [Agile Mindset](https://blog.avenuecode.com/blog/topic/agile-mindset?hsLang=en-us) - [Mobile Experience](https://blog.avenuecode.com/blog/topic/mobile-experience?hsLang=en-us) - [Quality First](https://blog.avenuecode.com/blog/topic/quality-first?hsLang=en-us) - [Whitepapers](https://blog.avenuecode.com/blog/topic/whitepapers?hsLang=en-us) - [Spotlight](https://blog.avenuecode.com/blog/topic/spotlight?hsLang=en-us) - [Extraordinary Women in Tech](https://blog.avenuecode.com/blog/topic/extraordinary-women-in-tech?hsLang=en-us) - [Avenue Code Culture](https://blog.avenuecode.com/blog/topic/avenue-code-culture?hsLang=en-us) # [React Context API](https://blog.avenuecode.com/react-context-api) - [Tweet](https://twitter.com/share) *perm\_identity* [Bruno Dias](https://blog.avenuecode.com/react-context-api/author/bruno-dias?hsLang=en-us) *schedule* 6/5/19 2:00 PM Let's talk about the React Context API that React 16.3 added. An "old" API existed, but people avoid using it now since documentation recommends the new version. So what's great about React Context API? Well, the definition that the [documentation](https://reactjs.org/docs/context.html) provides for the context API makes the benefits pretty clear: "Context provides a way to pass data through the component tree without having to pass props down manually at every level." With pure React (using props objects), we need to store our data in our parent component in the tree to pass down the data to the child component. This chain of data can be very confusing if we have a lot of nested components. So the most common use case is to isolate the data in a place and make the components access it when needed. Redux is the most popular tool to deal with this case, and the new Context API works in essentially the same manner. Let me show you an example. Let's create a React project with \`\`\`create-react-app\`\`\`. In the app.js file, we will create two components, App and Car. On the App component, we will create an object with some initial state in it, and our goal will be to pass this state to the Car component. ![](https://blog.avenuecode.com/hubfs/Screen%20Shot%202019-01-15%20at%2011.20.23%20AM.png)  Let's say we have a component chain with our Car component inside Factory and Factory inside App. The Car component needs to access the state stored in App. So I have to pass the data from App to Factory and then from Factory to Car. As I mentioned earlier, this can become problematic if we have a lot of nesting:  ![](https://blog.avenuecode.com/hubfs/Screen%20Shot%202019-01-15%20at%2011.35.51%20AM.png)  This is the kind of situation where the Context API can make our lives easier. If we are going to use Context API, we need two things: a Provider and a Consumer. A Provider accepts a prop value, which can be an object, functions, or any type of data. You can assume it is an object containing your data and actions you want to work with. The Consumer is the object that makes the data stored on the Provider available to the component. Let's look at an example: First of all, we have to create a Context and a Provider component where we are going to store our data. ![](https://blog.avenuecode.com/hubfs/Screen%20Shot%202019-01-15%20at%2012.02.54%20PM.png) On the MyProvider component, we are setting a state object and a render function. This function must return a Context Provider Object, which, in this case, is MyContext. As shown above, the Provider will wrap our application because we are going to use it in the App component as a store, and then we can access the data from it later. At this point, the data we set for our Provider is hard coded on the prop value, the string,  'My context value'. We are passing this data to all the components that are wrapped inside the Provider, which are all its children. So we can go back to our App component and wrap our code. In this way, any child inside that Provider can access the data stored in it. ![](https://blog.avenuecode.com/hubfs/Screen%20Shot%202019-01-15%20at%2012.19.06%20PM.png) You may notice that I removed the prop from the Factory component.This is because now we are going to consume our data directly from our Context to the Car component. And how can we do this? In the Car component, we have to create a Consumer to grab the data from our Provider. The Consumer requires a function to be passed as a child, and the child of a Consumer is always a function, so we need to indicate this to React by using curly braces. In the function, we receive the context value as an argument. This value is what you pass in the MyProvider props, and then you can return what you want, e.g. a **

** tag. ![](https://blog.avenuecode.com/hubfs/Screen%20Shot%202019-01-15%20at%2012.47.23%20PM.png)  Now let's look at the actual result on the screen: ![](https://blog.avenuecode.com/hubfs/Screen%20Shot%202019-01-15%20at%2012.48.55%20PM.png)  You can see our Provider wrapping all of the components and our Consumer just on the Car component. If we go back to our Provider, the prop value is hardcoded "My context value."  How do we pass our state object to this props? Actually, it's very simple: we pass it as an object and mount this object as we please, with functions, objects, and any type of data. ![](https://blog.avenuecode.com/hubfs/Screen%20Shot%202019-01-15%20at%2012.57.06%20PM.png) And then we consume it like this: ![](https://blog.avenuecode.com/hubfs/Screen%20Shot%202019-01-15%20at%202.59.32%20PM.png) So, as we see in the examples above, the benefit of using Context API is avoiding all the processes you have to go through to get and pass data to parts of the React Component tree. I hope this helps you understand a little bit about how Context API works. If you want to access the code repository, [here it is](https://github.com/bpdias/context-api-example). Thanks for reading!  --- [![LinkedIn Icon](https://blog.avenuecode.com/hubfs/Images/Blog/linkedin.png)](https://www.linkedin.com/in/bruno-de-paula-dias/) ### Author # Bruno Dias I am a consultant and front-end developer with 5+ years' experience. --- ### Related Posts ### Building Accessible Web Applications [READ MORE](https://blog.avenuecode.com/building-accessible-web-applications?hsLang=en-us) ### How the Mulesoft JWT Validation Policy Works [READ MORE](https://blog.avenuecode.com/mulesoft-jwt-validation-policy-works?hsLang=en-us) ### How to Use Redis Cache to Prevent DDoS Attacks [READ MORE](https://blog.avenuecode.com/use-redis-cache-to-prevent-attacks?hsLang=en-us) ### Using Spring Webflux for REST APIs: Annotated and Functional Endpoints [READ MORE](https://blog.avenuecode.com/using-spring-webflux-for-rest-apis-annotated-and-functional-endpoints?hsLang=en-us) ### Leave a Comment! ### Avenue Code Social [![Facebook Icon](https://blog.avenuecode.com/hubfs/Images/Blog/facebook.png?t=1486470796564)](https://www.facebook.com/avenuecode) [![Twitter Icon](https://blog.avenuecode.com/hubfs/Images/Blog/twitter.png?t=1486470796842)](https://twitter.com/AvenueCode) [![LinkedIn Icon](https://blog.avenuecode.com/hubfs/Images/Blog/linkedin.png?t=1486470796556)](https://www.linkedin.com/company/avenue-code) ### Newsletter Want to stay on top of all tips and news from Avenue Code? ### Popular Snippets ![Primary Logo AvenueCode Inverted.png](https://blog.avenuecode.com/hs-fs/hubfs/Images/Logos/Primary%20Logo%20AvenueCode%20Inverted.png?width=1104&name=Primary%20Logo%20AvenueCode%20Inverted.png "Primary Logo AvenueCode Inverted.png") ### About Us - [Who We Are](https://www.avenuecode.com/who-we-are) - [What We Do](https://www.avenuecode.com/what-we-do) - [Portfolio](https://www.avenuecode.com/portfolio) - [Partners](https://www.avenuecode.com/partners) - [News](https://www.avenuecode.com/news) - [Events](https://www.avenuecode.com/events) - [Blog](https://blog.avenuecode.com/) - [Contact](https://www.avenuecode.com/contact) ### Our Offices San Francisco [+1 415 766 4178](tel:+553125161448) [ac.inquiries@avenuecode.com](mailto:brazil.info@avenuecode.com) Belo Horizonte [+55 31 2516 1448](tel:+553125161448) [brazil.info@avenuecode.com](mailto:brazil.info@avenuecode.com) São Paulo [+55 11 3205 3232](tel:+553125161448) [brazil.info@avenuecode.com](mailto:brazil.info@avenuecode.com) ### We're Hiring! - [Belo Horizonte](https://www.avenuecode.com/who-we-are) - [New York](https://www.avenuecode.com/what-we-do) - [San Francisco](https://www.avenuecode.com/portfolio) - [São Paulo](https://www.avenuecode.com/partners) --- ©2015 - 2017 Avenue Code [![Facebook Icon](https://blog.avenuecode.com/hubfs/Images/Icons/facebook-2.png)](https://www.facebook.com/avenuecode) [![Twitter Icon](https://blog.avenuecode.com/hubfs/Images/Icons/twitter-2.png)](https://twitter.com/AvenueCode) [![LinkedIn Icon](https://blog.avenuecode.com/hubfs/Images/Icons/linkedin-2.png)](https://www.linkedin.com/company/avenue-code) [![Glassdoor Icon](https://blog.avenuecode.com/hubfs/Images/Icons/glassdoor-icon-1.png)](https://www.glassdoor.com/Overview/Working-at-Avenue-Code-EI_IE456173.11,22.htm) [![YouTube Icon](https://blog.avenuecode.com/hubfs/Images/Icons/youtube-2.png)](https://www.youtube.com/user/AvenueCodePlay) Please enable JavaScript to view the [comments powered by Disqus.](http://disqus.com/?ref_noscript) © 2026 Avenue Code ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Bruno Dias", "url" : "https://blog.avenuecode.com/author/bruno-dias" }, "dateModified" : "2019-06-05T17:00:01.346Z", "datePublished" : "2019-06-05T17:00:00.000Z", "headline" : "React Context API", "image" : [ "https://blog.avenuecode.com/hubfs/negative-space-laptop-touch-coffee-mobile-phone-man-work-desk-office-linkedin.jpg" ], "mainEntityOfPage" : { "@id" : "https://blog.avenuecode.com/react-context-api", "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://blog.avenuecode.com/hubfs/Avenue%20Code%20New%20Logos%20-%202023/Avenue%20Code-primary%20versions_LOGO%20HORIZONTAL%20group%201-7.png" }, "name" : "Avenue Code" } } ```