Menu
React has a feature called Context which advertises a way to store globally accessible values without having to pass them down as props.
What is unclear to me is what advantages this has over storing values on the window. If on my page I have window.current_user = user_details, the user details are now available to all react components. What would the advantages be to moving this in to React's context?
757
When to Use Context . Context is designed to share data that can be considered “global” for a tree of React components, such as the current authenticated user, theme, or preferred language. For example, in the code below we manually thread through a “theme” prop in order to style the Button component:
Legacy API; When to Use Context . Context is designed to share data that can be considered “global” for a tree of React components, such as the current authenticated user, theme, or preferred language. For example, in the code below we manually thread through a “theme” prop in order to style the Button component:
But comparing the two is tricky because React is a JavaScript library – it takes the existing code for JavaScript and makes it more powerful in a specific way. So, on one hand, there wouldn’t realistically be a React without JavaScript – but on the other hand, JavaScript out-of-the-box isn’t capable of doing what React can do.
Redux is much more powerful and provides a large number of features that the Context Api doesn't provide, also as As @danAbramov mentioned React Redux uses context internally but it doesn’t expose this fact in the public API.
If a variable on window changes, React won't know, so it can't re-render pieces of your app that depend on that data.
With context, any changes to the data will trigger re-renders.
There are arguably other advantages, but in my opinion, the re-render difference makes the two options basically apples and oranges.
On the other hand, Context isn't truly "global," because the Consumer (where you read the data) has to be somewhere beneath the Provider (where the values are written) in the hierarchy. This would make Context unsuitable, for example, in an app where the Settings menu was way down in the component hierarchy, but settings consumers were peppered throughout the app, as there's no way to pass values "up" using context.
So, if the data you're interested in doesn't change often (or at all) after the app's initial render, my opinion is that window could be more suitable than Context. Some folks will argue that this clogs up the window object, or that it violates other (usually sound) design principles, but in my opinion, if you understand the tradeoffs, using window can be a perfectly pragmatic decision.
54
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
