Pass Data through a Component Tree using Context Providers and Consumers in React 16.3

Nik Graf
InstructorNik Graf

Share this video with your friends

Send Tweet

With React 16.3 a new Context API was introduced. It provides a way to share values like that are considered global between components without having to explicitly pass a prop through every level of the tree.

When creating a context we get a Provider to pass values into the tree, as well as Consumer in order get them out.

Bogdan Soare
Bogdan Soare
~ 3 years ago

The videos are well explained but please make some original examples instead of just using the ones from the docs

Nik Graf
Nik Grafinstructor
~ 3 years ago

Thanks for you feedback!

My goal was to find the best possible way to explain the concept. For the other lesson I found other more useful, but particularly for this one the docs examples were the best I could imagine. Why is it a concern to use them?

John Darryl Pelingo
John Darryl Pelingo
~ 3 years ago

As someone who has read the docs and then watches these very informative videos, I have had a lot of lightbulbs turned on. Thank you and keep it up!

Nik Graf
Nik Grafinstructor
~ 3 years ago

Really glad to hear John, thanks 🙌

Nick
Nick
~ 3 years ago

I had same impression as Bogdanich Soare:

The videos are well explained but please make some original examples instead of just using the ones from the docs

Perhaps you should offer more than a straight copy of the official docs, even if you believe they are the best example you can find. You ask why. The answer is that it’s a waste of members’ time to watch a video presentation of exactly the same text-based material they’ve already consumed online -- especially when that text-based material is more extensive.

dong cai
dong cai
~ 3 years ago

Thanks for your videos Nik. I got one question.

removing the theme context provider in the App component, deprecation will still work properly. The consumers simply will fall back to the default value we provided when creating the context. This is especially helpful for testing components in isolation without wrapping them.

What does that mean? Does it mean the the context value falls back to the default value "dark". It would be more useful if you could expand it and talk about how to test Context component.

By the way

There's one gotcha though I want to make you aware of. When passing a value to Provider, avoid doing this. It can lead to unintentional renders in Consumers since every time the provider is rendered, a new object for the context value is created. The root cause here is that context uses reference identity to determine when to re-render all the Consumers.

This is the exact gotcha moment I came across. Thank you for your tip.

Nik Graf
Nik Grafinstructor
~ 3 years ago

@dong Yes, so if you have component which has a consumer, but in a test case you only want to render this component and not wrap it in a provider from that context e.g. ThemeContext it will use that default value. Does that help?

Ilham Wahabi
Ilham Wahabi
~ 2 years ago

Thank you for the lesson, but your voice is a bit hard to hear (too calm though). Its even maximum volume in my computer and still got lost in some cases.

Nik Graf
Nik Grafinstructor
~ 2 years ago

@Ilham thx for the feedback, will try to improve the recording next time