React’s New Context API Explained

Hey Folks! React 16.3 has a new Context API which makes accessing data and functions anywhere in your application a snap. If you ever find yourself passing data down via props 4-5 levels deep, context might be what you are looking for.


Code Examples available at

This entry was posted in JavaScript. Bookmark the permalink.

24 Responses to React’s New Context API Explained

  1. Blake says:

    Awesome! Thanks for the update!!

  2. Andrew says:

    👍@wesbos as usual on 🔥

  3. anil ingle says:

    how to create sepretes file and where to place const MyContext = React.createContext();
    if i created App.js,Family.js,Person.js,MyProvider.js seprate files

  4. Ben says:

    wish you did point out the limitations, cause this seems to do exactly what redux is for, w-o having to do extra work with actions and reducers.

  5. Carol Enache says:

    when is the Advanced React course coming out?

  6. Okan Vurdu says:

    What a great explanation, thanks!

  7. Anh Tran says:

    Awesome! Thanks for the update!

  8. Brian Wendt says:

    Thanks for the video Wes!

  9. unleashit says:

    Thanks for the vid, it was very helpful. Just wondering, why not follow convention and send the state and class methods down as top level props from the context provider? Something like props={…this.state, func1, func2}. Then you could consume them in the same way as normal props from the consumer.

  10. Chad Elofson says:

    This is exactly what I am looking for. Thanks for the detail!

  11. Bryce Snyder says:

    Would definitely be interested in knowing the caveats associated with using this? Is this worth implementing in large scale applications or is it more advisable to go with Redux?

  12. sanjay says:

    thanks it was helpful..

  13. Daniel says:

    Very good tutorial. Thank you

  14. Rishi says:

    Thanks for the video, it would have been good if Redux vs Context API comparisons were highlighted i.e. when to use Redux and not context.

  15. Gonçalo says:

    Thanks once again, I always come to you when I want to understand/learn something new.
    Your videos and way of explaining help us all understand things more quickly and easier.

  16. Ping Zheng says:

    Thanks for the video!And I like your ide config so much, especially font theme and other plugins,that looks very cool!Do you have some videos about your ide??

  17. Yannick Sereckissy says:

    Great tutorial! keep up with it.

  18. Just coming across it, thanks a lot!

  19. Michal Rejman says:

    Awesome content, thanks so much for sharing! We put together some cases on when to use and NOT to use ContextAPI instead of Redux. You may check it out here:

  20. Mustafa says:

    Thank you, I have a question, in Context API documentation,
    they’ve mentioned that “Because context uses reference identity to determine when to re-render, there are some gotchas that could trigger unintentional renders in consumers when a provider’s parent re-renders. For example, the code below will re-render all consumers every time the Provider re-renders because a new object is always created for value:

    so they solve it by passing value from the App itself,
    I got confused, is there any clarification for that.?

Leave a Reply

Your email address will not be published. Required fields are marked *