Pass Data through a Component Tree using Context Providers and Consumers in React 16.3
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.
The videos are well explained but please make some original examples instead of just using the ones from the docs
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?
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!
Really glad to hear John, thanks 🙌
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.
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.
@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?
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.
@Ilham thx for the feedback, will try to improve the recording next time