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 ponents. What would the advantages be to moving this in to React's context?

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 ponents. What would the advantages be to moving this in to React's context?

• javascript
• reactjs

Share Improve this question Follow asked Aug 30, 2019 at 3:55 QwertieQwertie 6,5731414 gold badges5454 silver badges102102 bronze badges 2

• How do you watch for changes of window.current_user and execute updates of React ponent state to trigger re-render and similar based on changes to that value? – Alexander Staroselsky Commented Aug 30, 2019 at 4:00
• Just off the top of my head, I think polluting the window global object is generally not good. Also, there would be no way to limit access to a window object pared to the context provider. – Evan Commented Aug 30, 2019 at 4:00

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 15

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 ponent 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.