Elaborate on key equality

Readers unfamiliar with the concept of object equality in Javascript may have a hard time understanding why using keys as a reference is safe. So I elaborated a little on it.

Also, I changed the "context is not reactive" part into a section of its own, deleting the word "Remember" from the opening. I couldn't remember it from previously on this page or in the tutorial, so I think it may be a leftover from a previous version of the tutorial.
pull/3339/head
vages 5 years ago committed by GitHub
parent 981f30d3e9
commit 78eaf77a65
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -44,6 +44,9 @@ In `mapbox.js` you'll see this line:
const key = {};
```
We can use anything as a key — we could do `setContext('mapbox', ...)` for example. The downside of using a string is that different component libraries might accidentally use the same one; using an object literal means the keys are guaranteed not to conflict in any circumstance, even when you have multiple different contexts operating across many component layers.
We can use anything as a key — we could do `setContext('mapbox', ...)` for example. The downside of using a string is that different component libraries might accidentally use the same one; using an object literal means the keys are guaranteed not to conflict in any circumstance, even when you have multiple different contexts operating across many component layers. Note that you have to import the object literal to reference it; just typing `{}` will not work.
> Remember that context is not inherently reactive. If you need context values to be reactive then you can pass a store into context, which *will* be reactive.
> The keys behave in this way because of how the equality operator works in Javascript: [objects are only considered equal if the objects refer to the same actual object, while strings are considered equal if their contents are the same](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators). You can test this by opening your browser's console and typing `({} === {})` (evaluates to `false`), as opposed to `("foo" === "foo")` or `const a = {}; a === a;` (both evaluate to `true`).
## Context is not reactive
Context is not inherently reactive. If you need context values to be reactive, then you can pass a store into context, which *will* be reactive.

Loading…
Cancel
Save