From 1ead0605c2c7f08aaef46ae595a04297ed438975 Mon Sep 17 00:00:00 2001 From: Alex Krolick Date: Fri, 23 Mar 2018 11:04:29 -0700 Subject: [PATCH 01/15] 17 -> future version --- content/docs/context.md | 2 +- content/docs/legacy-context.md | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/content/docs/context.md b/content/docs/context.md index 50cd4dec..cbfee3bf 100644 --- a/content/docs/context.md +++ b/content/docs/context.md @@ -109,5 +109,5 @@ A more complex example with dynamic values for the theme: > Note > -> React previously shipped with an experimental context API. The old API will be supported in all 16.x releases, but applications using it should migrate to the new version. The legacy API will be removed in React 17. Read the [legacy context docs here](/docs/legacy-context.html). +> React previously shipped with an experimental context API. The old API will be supported in all 16.x releases, but applications using it should migrate to the new version. The legacy API will be removed in a future major React versin. Read the [legacy context docs here](/docs/legacy-context.html). \ No newline at end of file diff --git a/content/docs/legacy-context.md b/content/docs/legacy-context.md index cff4d6a5..0074b803 100644 --- a/content/docs/legacy-context.md +++ b/content/docs/legacy-context.md @@ -6,7 +6,7 @@ permalink: docs/legacy-context.html > Note: > -> The legacy context API will be removed in version 17. +> The legacy context API will be removed in a future major version. > Use the [new context API](/docs/context.html) introduced with version 16.3. > The legacy API will continue working for all 16.x releases. @@ -214,4 +214,4 @@ MediaQuery.childContextTypes = { }; ``` -The problem is, if a context value provided by component changes, descendants that use that value won't update if an intermediate parent returns `false` from `shouldComponentUpdate`. This is totally out of control of the components using context, so there's basically no way to reliably update the context. [This blog post](https://medium.com/@mweststrate/how-to-safely-use-react-context-b7e343eff076) has a good explanation of why this is a problem and how you might get around it. \ No newline at end of file +The problem is, if a context value provided by component changes, descendants that use that value won't update if an intermediate parent returns `false` from `shouldComponentUpdate`. This is totally out of control of the components using context, so there's basically no way to reliably update the context. [This blog post](https://medium.com/@mweststrate/how-to-safely-use-react-context-b7e343eff076) has a good explanation of why this is a problem and how you might get around it. From d58c89216936b5fe7138bb974502c465b8efb7e4 Mon Sep 17 00:00:00 2001 From: Alex Krolick Date: Fri, 23 Mar 2018 11:07:53 -0700 Subject: [PATCH 02/15] + "same algo" --- content/docs/context.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/context.md b/content/docs/context.md index cbfee3bf..b16cb611 100644 --- a/content/docs/context.md +++ b/content/docs/context.md @@ -68,7 +68,7 @@ Accepts a `value` prop to be passed to Consumers that are descendants of this Pr A React component that subscribes to context changes. -Requires a [function as a child](/docs/render-props.html#using-props-other-than-render). The function receives the current context value and returns a React node. All consumers are re-rendered whenever the Provider value changes. Changes are determined by comparing the new and old values using [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is). +Requires a [function as a child](/docs/render-props.html#using-props-other-than-render). The function receives the current context value and returns a React node. All consumers are re-rendered whenever the Provider value changes. Changes are determined by comparing the new and old values using the same algorithm as [`Object.is`](developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Description). > Note > From e6898245d9e5d485e2ddf98df76b8baf3483cec2 Mon Sep 17 00:00:00 2001 From: Alex Krolick Date: Fri, 23 Mar 2018 11:13:25 -0700 Subject: [PATCH 03/15] Add notes about composing multiple contexts --- content/docs/context.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/content/docs/context.md b/content/docs/context.md index b16cb611..79ec475c 100644 --- a/content/docs/context.md +++ b/content/docs/context.md @@ -91,8 +91,12 @@ A more complex example with dynamic values for the theme: ## Consuming Multiple Contexts +To keep context re-rendering fast, React needs to make each context consumer a separate node in the tree. + `embed:context/multiple-contexts.js` +If two or more context values are often used together, you might want to consider creating your own render prop component that provides both. [React Context Composer](https://github.com/FormidableLabs/react-context-composer/) is a simple library to help with this. + ## Accessing Context in Lifecycle Methods `embed:context/lifecycles.js` From 509b1265101e430beaf3b3efd149240c97ee4a3c Mon Sep 17 00:00:00 2001 From: Alex Krolick Date: Fri, 23 Mar 2018 11:23:22 -0700 Subject: [PATCH 04/15] Explain context in lifecycle a bit more --- content/docs/context.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/content/docs/context.md b/content/docs/context.md index 79ec475c..0d798490 100644 --- a/content/docs/context.md +++ b/content/docs/context.md @@ -99,6 +99,8 @@ If two or more context values are often used together, you might want to conside ## Accessing Context in Lifecycle Methods +Accessing values from context in lifecycle methods is a relatively common use case. Instead of adding context to every lifecycle method, you just need to pass it as a prop, and then work with it just like you'd normally work with a prop. + `embed:context/lifecycles.js` ## Forwarding Refs to Context Consumers From fe84e096dc8aa198b1f177d0c0641c0976d73134 Mon Sep 17 00:00:00 2001 From: Alex Krolick Date: Fri, 23 Mar 2018 11:25:41 -0700 Subject: [PATCH 05/15] Explain why you need forwardRef --- content/docs/context.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/content/docs/context.md b/content/docs/context.md index 0d798490..907a9d3e 100644 --- a/content/docs/context.md +++ b/content/docs/context.md @@ -105,6 +105,8 @@ Accessing values from context in lifecycle methods is a relatively common use ca ## Forwarding Refs to Context Consumers +One issue with the render prop API is that refs don't automatically get passed to wrapped elements. To get around this, use `React.forwardRef`: + **fancy-button.js** `embed:context/forwarding-refs-fancy-button.js` From 9e4442a5ad33e8704ab0fb7db81f1d35d492d31f Mon Sep 17 00:00:00 2001 From: Alex Krolick Date: Fri, 23 Mar 2018 11:28:16 -0700 Subject: [PATCH 06/15] typo --- content/docs/context.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/context.md b/content/docs/context.md index 907a9d3e..6a3cd9b6 100644 --- a/content/docs/context.md +++ b/content/docs/context.md @@ -117,5 +117,5 @@ One issue with the render prop API is that refs don't automatically get passed t > Note > -> React previously shipped with an experimental context API. The old API will be supported in all 16.x releases, but applications using it should migrate to the new version. The legacy API will be removed in a future major React versin. Read the [legacy context docs here](/docs/legacy-context.html). +> React previously shipped with an experimental context API. The old API will be supported in all 16.x releases, but applications using it should migrate to the new version. The legacy API will be removed in a future major React version. Read the [legacy context docs here](/docs/legacy-context.html). \ No newline at end of file From 3c44882d68951a9c0af12ed625837064f4274bd2 Mon Sep 17 00:00:00 2001 From: Alex Krolick Date: Fri, 23 Mar 2018 11:39:12 -0700 Subject: [PATCH 07/15] Use function keyword --- examples/context/motivation-problem.js | 8 ++++---- examples/context/motivation-solution.js | 10 +++++----- examples/context/multiple-contexts.js | 4 ++-- examples/context/theme-detailed-app.js | 4 ++-- 4 files changed, 13 insertions(+), 13 deletions(-) diff --git a/examples/context/motivation-problem.js b/examples/context/motivation-problem.js index cf9aa924..e3c5b3f2 100644 --- a/examples/context/motivation-problem.js +++ b/examples/context/motivation-problem.js @@ -1,10 +1,10 @@ -const ThemedButton = props => { +function ThemedButton(props) { //highlight-range{1} return