From 310098ede8ea8021a57babf89a06b862b186f935 Mon Sep 17 00:00:00 2001 From: Arad Aral Date: Fri, 24 Dec 2021 02:59:57 +0330 Subject: [PATCH] Use symbols instead of empty object literals for context keys in tutorial --- .../tutorial/15-context/01-context-api/app-a/mapbox.js | 2 +- .../tutorial/15-context/01-context-api/app-b/mapbox.js | 2 +- site/content/tutorial/15-context/01-context-api/text.md | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/site/content/tutorial/15-context/01-context-api/app-a/mapbox.js b/site/content/tutorial/15-context/01-context-api/app-a/mapbox.js index 55b4200038..9c5cec430c 100644 --- a/site/content/tutorial/15-context/01-context-api/app-a/mapbox.js +++ b/site/content/tutorial/15-context/01-context-api/app-a/mapbox.js @@ -3,6 +3,6 @@ import mapbox from 'mapbox-gl'; // https://docs.mapbox.com/help/glossary/access-token/ mapbox.accessToken = MAPBOX_ACCESS_TOKEN; -const key = {}; +const key = Symbol(); export { mapbox, key }; \ No newline at end of file diff --git a/site/content/tutorial/15-context/01-context-api/app-b/mapbox.js b/site/content/tutorial/15-context/01-context-api/app-b/mapbox.js index 55b4200038..9c5cec430c 100644 --- a/site/content/tutorial/15-context/01-context-api/app-b/mapbox.js +++ b/site/content/tutorial/15-context/01-context-api/app-b/mapbox.js @@ -3,6 +3,6 @@ import mapbox from 'mapbox-gl'; // https://docs.mapbox.com/help/glossary/access-token/ mapbox.accessToken = MAPBOX_ACCESS_TOKEN; -const key = {}; +const key = Symbol(); export { mapbox, key }; \ No newline at end of file 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 53695b7d69..7fdb1f7dab 100644 --- a/site/content/tutorial/15-context/01-context-api/text.md +++ b/site/content/tutorial/15-context/01-context-api/text.md @@ -40,10 +40,10 @@ The markers can now add themselves to the map. In `mapbox.js` you'll see this line: ```js -const key = {}; +const key = Symbol(); ``` -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. +Technically, we can use any value 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 [symbols](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol), on the other hand, means that the keys are guaranteed not to conflict in any circumstance, even when you have multiple different contexts operating across many component layers, since a symbol is essentially a unique identifier. ## Contexts vs. stores