Context updates #5

alexkrolick · 2018-03-23T18:14:44Z

WIP again

acdlite · 2018-03-23T18:26:05Z

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. 


Why mention this? It's an implementation detail.

https://github.com/reactjs/reactjs.org/pull/587/files#r176797917

cc: @gaearon I feel like this is a rationalization, because we would likely use this same API even if it didn't happen to be good for performance. It's the way it is for multiple reasons, not only that one.

Feel free to suggest an alternative :-) It's the only way I've been able to get people to put behind their preconception that the extra nesting is "ugly". I feel that if we don't double down on this and somehow motivate it (I don't care much how exactly), we'll keep getting the same confused looks.

I suppose. Though the people who think the extra nesting is ugly aren't wrong :D

To me, the main motivation for using special component types is that it decouples context from classes. So when we introduce a new component API in the future, context will already just work. This is one of the rationales behind higher-order component pattern we've been discussing.

Maybe we should just ship useContext. Or provide a recipe for it, since it's only a few lines.

But if you feel this sentence is a good way to head off objections, I'm cool with leaving it in, even if I don't agree it's the main reason we designed it this way.

acdlite · 2018-03-23T18:26:17Z

content/docs/context.md

@@ -109,5 +113,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).


Typo: version

acdlite · 2018-03-23T18:28:01Z

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.


Could we move the entire "legacy context" section to its own document and link to it here? I think that would reduce the potential for confusion.

Isn't this the legacy context document? (legacy-context.md)

Oh lol, my bad :D

acdlite · 2018-03-23T18:31:10Z

content/docs/context.md

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


I would prefer not to recommend that library. It's fine, but it might not align with our future strategy for composing features. Also wary of recommending any one library over another one in the official docs. If we're going to link to any, we should link to more than one.

Also, let's not refer to anything as "simple." A pet peeve of mine :D

Are you okay with leaving just the first sentence?

Or maybe with a custom example that does that (without a library).

Yeah that part is fine

alexkrolick · 2018-03-23T18:59:16Z

content/docs/context.md

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


Copied straight from reactjs#587 (comment)

Probably could use some wordsmithing

gaearon · 2018-03-23T19:35:39Z

examples/context/theme-detailed-app.js

+      theme: themes.light,
+    };
+
+    this.toggleTheme = () => {


Note: this is still using property initializer syntax

Isn't arrow fn in the constructor the same as .bind in the constructor?

Yes but it's not in any stable standard. It relies on the "public fields" proposal which is in stage 3.

Ooh never mind I completely missed that you did this inside the constructor. I guess it's not very idiomatic (people tend to use bind instead so that the method is defined together with other class methods), but it's fine.

Will change if you think it's confusing.

https://twitter.com/alexmkrolick/status/977277592087666688

FWIW it's the same in the ref docs: https://github.com/reactjs/reactjs.org/pull/587/files#diff-5ff76597e6c547982df2b2e42f2f83c0R285

alexkrolick added 5 commits March 23, 2018 11:04

17 -> future version

1ead060

+ "same algo"

d58c892

Add notes about composing multiple contexts

e689824

Explain context in lifecycle a bit more

509b126

Explain why you need forwardRef

fe84e09

acdlite reviewed Mar 23, 2018

View reviewed changes

typo

9e4442a

acdlite reviewed Mar 23, 2018

View reviewed changes

alexkrolick added 5 commits March 23, 2018 11:39

Use function keyword

3c44882

Remove propTypes

f9225e2

kill class props

fb8e9e8

Use functional component

6919801

Remove lib link

c9d50e3

alexkrolick commented Mar 23, 2018

View reviewed changes

gaearon reviewed Mar 23, 2018

View reviewed changes

alexkrolick added 4 commits March 23, 2018 13:20

Replace divs with some fake components

920b4f4

Add caveats section

349446d

Prettier

b0e8604

Fix syntax

8437e37

alexkrolick mentioned this pull request Mar 23, 2018

16.3 release blog draft reactjs/react.dev#587

Merged

bvaughn merged commit 587ad93 into bvaughn:16.3-release-blog-post Mar 23, 2018

		@@ -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

		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.

Uh oh!

Context updates #5

Context updates #5

Uh oh!

Conversation

alexkrolick commented Mar 23, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

acdlite Mar 23, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

acdlite Mar 23, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

alexkrolick Mar 23, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

alexkrolick Mar 23, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

alexkrolick Mar 23, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

alexkrolick commented Mar 23, 2018 •

edited

Loading

acdlite Mar 23, 2018 •

edited

Loading

acdlite Mar 23, 2018 •

edited

Loading

alexkrolick Mar 23, 2018 •

edited

Loading

alexkrolick Mar 23, 2018 •

edited

Loading

alexkrolick Mar 23, 2018 •

edited

Loading