The prop drilling problem can be frustrating for data that changes over time and is needed throughout the application. Luckily for us, we can use React's createContext
API to make state (like on
) and state updater functions (like toggle
) available anywhere in the tree. In this lesson let's see how to side-step the prop drilling problem with a custom context provider and consumer.
What is the purpose of spreading the props in <Toggle.Provider value={{//value here }} {...this.props} /> ? Is it to provide a way to override the provider value?
Is it to provide a way to override the provider value?
That's exactly the reason. It's useful primarily for testing.
Got it! thanks Kent, great course. I hope to see more courses from you :smile:
Kent, I’m interested in comparing the view from the React docs on the Context API which states “such as the current authenticated user, theme, or preferred language” and “Apply it sparingly because it makes component reuse more difficult.”. The use in your example feels like it is not in the situations from the official docs, though they clearly don’t say don’t do it.
What’s your feeling on what the docs say about context and comparing how you have used it for local, often changing state, and methods.
I’m not experienced enough to feel I have my own firm view on this. If I can understand your “justification” of the use and how you feel about what the docs say it’s for I think that would help me greatly.
I’d add, “such as the current authenticated user, theme, or preferred language” to me implies relatively infrequently changed and not updated by lower components.
Thanks Kent,
I’ve read those posts ( I think all of yours as I’m a fanboy!)
I think I’m not clear on when to just use local state ( other than for the obvious controlled components) vs context API ( I’ve only used useState ) vs a 3rd party state management package like the ubiquitous redux).
I can see and agree with not going for an abstraction that isn’t necessary (yet) it’s reading about comparisons between those with indications of when a more complex abstraction is useful and why. Other than trivial examples I am not clear when I should go for context or a further abstraction.
I’ve followed your advanced react components on egghead and on your tube. Is that the same content as your remote/face-to-face workshops?
If you could point me further than would greatly help me.
Sent from my iPhone
My remote workshop material has all been updated with React hooks. Some of the patterns are no longer necessary when you can use hooks. I do plan to eventually record videos of that material.
Thanks Kent
Sent from my iPhone