From 78eaf77a65522010969b18d8bae3ddd032d91414 Mon Sep 17 00:00:00 2001 From: vages Date: Sat, 3 Aug 2019 13:44:20 +0000 Subject: [PATCH 1/3] 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. --- site/content/tutorial/15-context/01-context-api/text.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/site/content/tutorial/15-context/01-context-api/text.md b/site/content/tutorial/15-context/01-context-api/text.md index ef146772c5..9895966c09 100644 --- a/site/content/tutorial/15-context/01-context-api/text.md +++ b/site/content/tutorial/15-context/01-context-api/text.md @@ -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. From 9d90272966fc5cc001715e50e6c1377899e05dd4 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sat, 3 Aug 2019 12:53:29 -0400 Subject: [PATCH 2/3] Make point about referential equality more concisely --- site/content/tutorial/15-context/01-context-api/text.md | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/site/content/tutorial/15-context/01-context-api/text.md b/site/content/tutorial/15-context/01-context-api/text.md index 9895966c09..aa028399b4 100644 --- a/site/content/tutorial/15-context/01-context-api/text.md +++ b/site/content/tutorial/15-context/01-context-api/text.md @@ -44,9 +44,6 @@ 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. Note that you have to import the object literal to reference it; just typing `{}` will not work. +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 (since an object only has referential equality to itself, i.e. `{} !== {}` whereas `"x" === "x"`), even when you have multiple different contexts operating across many component layers. -> 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. + > 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. From c48d3456f76c15fb777d92199aeb7560ffe82603 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sat, 3 Aug 2019 12:53:45 -0400 Subject: [PATCH 3/3] Update text.md --- site/content/tutorial/15-context/01-context-api/text.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/tutorial/15-context/01-context-api/text.md b/site/content/tutorial/15-context/01-context-api/text.md index aa028399b4..e577b9847e 100644 --- a/site/content/tutorial/15-context/01-context-api/text.md +++ b/site/content/tutorial/15-context/01-context-api/text.md @@ -46,4 +46,4 @@ 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 (since an object only has referential equality to itself, i.e. `{} !== {}` whereas `"x" === "x"`), even when you have multiple different contexts operating across many component layers. - > 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. +> 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.