Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New context API #11818

Merged
merged 17 commits into from Jan 25, 2018
Merged

New context API #11818

merged 17 commits into from Jan 25, 2018

Conversation

@acdlite
Copy link
Member

@acdlite acdlite commented Dec 9, 2017

Introduces a declarative context API that propagates updates even when shouldComponentUpdate returns false.

Corresponding RFC: reactjs/rfcs#2

We'll land this behind a feature flag and try it out on a Facebook product (also behind a feature flag) to get some real-world performance data. My plan is to build the React Redux API on top of it, find our largest product that uses Redux, swap out the implementation, and see what happens.

TODO:

  • Should be able to stop scanning when we hit a matching provider, then continue the scan later. Already doing this for matching consumers.
  • Use ReactElement as child type to save on bundle size.
  • Fuzz test.
  • Should we use Object.is to compare context values, or is === enough? shallowEqual uses Object.is, but we use === everywhere else.
  • Unwind context stack when interrupted (error, high pri update).
  • SSR
  • React.Children
  • Put this behind a feature flag.
@acdlite acdlite requested a review from sebmarkbage Dec 9, 2017
@acdlite acdlite mentioned this pull request Dec 9, 2017
0 of 4 tasks complete
@acdlite acdlite force-pushed the acdlite:new-context branch 4 times, most recently from e32309e to 06531e0 Dec 9, 2017
@gaearon
Copy link
Member

@gaearon gaearon commented Dec 9, 2017

More TODOs:

  • SSR support
  • React.Children should treat it as a valid type (see the switch in it)
@acdlite acdlite force-pushed the acdlite:new-context branch 3 times, most recently from e3bd9fa to 744c6d1 Dec 11, 2017
@gaearon
Copy link
Member

@gaearon gaearon commented Dec 12, 2017

Do you think it's worth copy pasting all/most old tests using context and porting them to the new API?

}
// Don't scan deeper than a matching consumer. When we render the
// consumer, we'll continue scanning from that point. This way the
// scanning work is time-sliced.

This comment has been minimized.

@iamdustan

iamdustan Dec 12, 2017
Contributor

does this imply that the internal subscriptions from react-redux (https://github.com/reactjs/react-redux/blob/master/src/utils/Subscription.js#L58) will be handled by React itself then?

This comment has been minimized.

@gaearon

gaearon Dec 12, 2017
Member

That's the plan

@jquense
Copy link
Collaborator

@jquense jquense commented Dec 12, 2017

we should ping the enzyme folks as well, they'll most likely need to update the traversal logic. @aweary

@gaearon
Copy link
Member

@gaearon gaearon commented Dec 12, 2017

Why does this affect traversal?

@jquense
Copy link
Collaborator

@jquense jquense commented Dec 12, 2017

ah maybe it doesn't :p it looked like it was adding new tag sort. I maybe have just been reading the PR wrong  ignore me!

@gaearon
Copy link
Member

@gaearon gaearon commented Dec 12, 2017

Ooh I see what you mean. I think @acdlite decided against that though and will keep it an element, overloading .type instead (not updated PR yet). But it's a good point to consider.

@acdlite
Copy link
Member Author

@acdlite acdlite commented Dec 13, 2017

@jquense @gaearon The child returned from render will be a ReactElement, but it's still using a special Fiber tag internally.

@acdlite
Copy link
Member Author

@acdlite acdlite commented Dec 13, 2017

Do you think it's worth copy pasting all/most old tests using context and porting them to the new API?

Eventually yeah. Semantically there's no reason it shouldn't. The biggest open question is performance, so before we worry about upgrade paths we need to find an implementation that works at scale. So I'd rather land this behind a feature flag and try this out on www.

@acdlite acdlite force-pushed the acdlite:new-context branch from 744c6d1 to 06e1347 Dec 13, 2017
@iamdustan
Copy link
Contributor

@iamdustan iamdustan commented Dec 13, 2017

Fwiw I'd be happy to test this out at Webflow, too, and share any perf data.

@acdlite acdlite force-pushed the acdlite:new-context branch 4 times, most recently from bd191af to 4aaae58 Dec 13, 2017
@@ -116,6 +123,36 @@ if (__DEV__) {
};
}

// Context (new API)
let providerStack: Array<ReactProvider<mixed>> = []; // Stack of provider objects

This comment has been minimized.

@gaearon

gaearon Dec 14, 2017
Member

Is this reentrant?

Imagine renderToString(<App />) where App calls renderToString() on another tree.

This comment has been minimized.

@acdlite

acdlite Dec 14, 2017
Author Member

Ooh, yeah, I'll put these on the instance and add a test

@gaearon
Copy link
Member

@gaearon gaearon commented Dec 14, 2017

Silly GitHub has hidden my comment. Please don't ignore it. :-)

@acdlite
Copy link
Member Author

@acdlite acdlite commented Dec 14, 2017

Updated with test for reentrant server renders

@@ -187,7 +194,7 @@ function warnNoop(
const constructor = publicInstance.constructor;
const componentName =
(constructor && getComponentName(constructor)) || 'ReactClass';
const warningKey = `${componentName}.${callerName}`;

This comment has been minimized.

@acdlite

acdlite Dec 14, 2017
Author Member

This change is because the previous version was screwing up my editor's syntax highlighting 😆

This comment has been minimized.

@batjko

batjko Jan 26, 2018

Sounds like the worst possible reason for a change in a project with more than one developer.

This comment has been minimized.

@acdlite

acdlite Jan 27, 2018
Author Member

I can think of worse ones

@acdlite acdlite force-pushed the acdlite:new-context branch from b6a95c3 to 5c5a621 Dec 15, 2017
This was referenced Mar 30, 2018
bors bot added a commit to mythmon/corsica-tree-status that referenced this pull request Apr 23, 2018
Merge #5
5: Update react monorepo to v16.3.2 r=mythmon a=renovate[bot]

This Pull Request renovates the package group "react monorepo".


-   [react-dom](https://github.com/facebook/react) (`dependencies`): from `16.2.0` to `16.3.2`
-   [react](https://github.com/facebook/react) (`dependencies`): from `16.2.0` to `16.3.2`

# Release Notes
<details>
<summary>facebook/react</summary>

### [`v16.3.0`](https://github.com/facebook/react/blob/master/CHANGELOG.md#&#8203;1630-March-29-2018)

##### React

* Add a new officially supported context API. ([@&#8203;acdlite] in [#&#8203;11818](`facebook/react#11818))
* Add a new `React.createRef()` API as an ergonomic alternative to callback refs. ([@&#8203;trueadm] in [#&#8203;12162](`facebook/react#12162))
* Add a new `React.forwardRef()` API to let components forward their refs to a child. ([@&#8203;bvaughn] in [#&#8203;12346](`facebook/react#12346))
* Fix a false positive warning in IE11 when using `React.Fragment`. ([@&#8203;XaveScor] in [#&#8203;11823](`facebook/react#11823))
* Replace `React.unstable_AsyncComponent` with `React.unstable_AsyncMode`. ([@&#8203;acdlite] in [#&#8203;12117](`facebook/react#12117))
* Improve the error message when calling `setState()` on an unmounted component. ([@&#8203;sophiebits] in [#&#8203;12347](`facebook/react#12347))
##### React DOM

* Add a new `getDerivedStateFromProps()` lifecycle and `UNSAFE_` aliases for the legacy lifecycles. ([@&#8203;bvaughn] in [#&#8203;12028](`facebook/react#12028))
* Add a new `getSnapshotBeforeUpdate()` lifecycle. ([@&#8203;bvaughn] in [#&#8203;12404](`facebook/react#12404))
* Add a new `<React.StrictMode>` wrapper to help prepare apps for async rendering. ([@&#8203;bvaughn] in [#&#8203;12083](`facebook/react#12083))
* Add support for `onLoad` and `onError` events on the `<link>` tag. ([@&#8203;roderickhsiao] in [#&#8203;11825](`facebook/react#11825))
* Add support for `noModule` boolean attribute on the `<script>` tag. ([@&#8203;aweary] in [#&#8203;11900](`facebook/react#11900))
* Fix minor DOM input bugs in IE and Safari. ([@&#8203;nhunzaker] in [#&#8203;11534](`facebook/react#11534))
* Correctly detect Ctrl + Enter in `onKeyPress` in more browsers. ([@&#8203;nstraub] in [#&#8203;10514](`facebook/react#10514))
* Fix containing elements getting focused on SSR markup mismatch. ([@&#8203;koba04] in [#&#8203;11737](`facebook/react#11737))
* Fix `value` and `defaultValue` to ignore Symbol values. ([@&#8203;nhunzaker] in [#&#8203;11741](`facebook/react#11741))
* Fix refs to class components not getting cleaned up when the attribute is removed. ([@&#8203;bvaughn] in [#&#8203;12178](`facebook/react#12178))
* Fix an IE/Edge issue when rendering inputs into a different window. ([@&#8203;M-ZubairAhmed] in [#&#8203;11870](`facebook/react#11870))
* Throw with a meaningful message if the component runs after jsdom has been destroyed. ([@&#8203;gaearon] in [#&#8203;11677](`facebook/react#11677))
* Don't crash if there is a global variable called `opera` with a `null` value. [@&#8203;alisherdavronov] in [#&#8203;11854](`facebook/react#11854))
* Don't check for old versions of Opera. ([@&#8203;skiritsis] in [#&#8203;11921](`facebook/react#11921))
* Deduplicate warning messages about `<option selected>`. ([@&#8203;watadarkstar] in [#&#8203;11821](`facebook/react#11821))
* Deduplicate warning messages about invalid callback. ([@&#8203;yenshih] in [#&#8203;11833](`facebook/react#11833))
* Deprecate `ReactDOM.unstable_createPortal()` in favor of `ReactDOM.createPortal()`. ([@&#8203;prometheansacrifice] in [#&#8203;11747](`facebook/react#11747))
* Don't emit User Timing entries for context types. ([@&#8203;abhaynikam] in [#&#8203;12250](`facebook/react#12250))
* Improve the error message when context consumer child isn't a function. ([@&#8203;raunofreiberg] in [#&#8203;12267](`facebook/react#12267)) 
* Improve the error message when adding a ref to a functional component. ([@&#8203;skiritsis] in [#&#8203;11782](`facebook/react#11782))
##### React DOM Server

* Prevent an infinite loop when attempting to render portals with SSR. ([@&#8203;gaearon] in [#&#8203;11709](`facebook/react#11709))
* Warn if a class doesn't extend `React.Component`. ([@&#8203;wyze] in [#&#8203;11993](`facebook/react#11993))
* Fix an issue with `this.state` of different components getting mixed up. ([@&#8203;sophiebits] in [#&#8203;12323](`facebook/react#12323))
* Provide a better message when component type is undefined. ([@&#8203;HeroProtagonist] in [#&#8203;11966](`facebook/react#11966))

---

### [`v16.3.1`](https://github.com/facebook/react/blob/master/CHANGELOG.md#&#8203;1631-April-3-2018)

##### React

* Fix a false positive warning in IE11 when using `Fragment`. ([@&#8203;heikkilamarko] in [#&#8203;12504](`facebook/react#12504))
* Prefix a private API. ([@&#8203;Andarist] in [#&#8203;12501](`facebook/react#12501))
* Improve the warning when calling `setState()` in constructor. ([@&#8203;gaearon] in [#&#8203;12532](`facebook/react#12532))
##### React DOM

* Fix `getDerivedStateFromProps()` not getting applied in some cases. ([@&#8203;acdlite] in [#&#8203;12528](`facebook/react#12528))
* Fix a performance regression in development mode. ([@&#8203;gaearon] in [#&#8203;12510](`facebook/react#12510))
* Fix error handling bugs in development mode. ([@&#8203;gaearon] and [@&#8203;acdlite] in [#&#8203;12508](`facebook/react#12508))
* Improve user timing API messages for profiling. ([@&#8203;flarnie] in [#&#8203;12384](`facebook/react#12384))
##### Create Subscription

* Set the package version to be in sync with React releases. ([@&#8203;bvaughn] in [#&#8203;12526](`facebook/react#12526))
* Add a peer dependency on React 16.3+. ([@&#8203;NMinhNguyen] in [#&#8203;12496](`facebook/react#12496))

---

### [`v16.3.2`](https://github.com/facebook/react/blob/master/CHANGELOG.md#&#8203;1632-April-16-2018)

##### React

* Improve the error message when passing `null` or `undefined` to `React.cloneElement`. ([@&#8203;nicolevy] in [#&#8203;12534](`facebook/react#12534))
##### React DOM

* Fix an IE crash in development when using `<StrictMode>`. ([@&#8203;bvaughn] in [#&#8203;12546](`facebook/react#12546))
* Fix labels in User Timing measurements for new component types. ([@&#8203;bvaughn] in [#&#8203;12609](`facebook/react#12609))
* Improve the warning about wrong component type casing. ([@&#8203;nicolevy] in [#&#8203;12533](`facebook/react#12533))
* Improve general performance in development mode. ([@&#8203;gaearon] in [#&#8203;12537](`facebook/react#12537))
* Improve performance of the experimental `unstable_observedBits` API with nesting. ([@&#8203;gaearon] in [#&#8203;12543](`facebook/react#12543))
##### React Test Renderer

* Add a UMD build. ([@&#8203;bvaughn] in [#&#8203;12594](`facebook/react#12594))

---


</details>

# Commits

<details>
<summary>facebook/react</summary>

#### v16.3.0
-   [`c2c3c0c`](facebook/react@c2c3c0c build script to handle react-is (no peer deps) (#&#8203;12471)
-   [`488ad5a`](facebook/react@488ad5a typo in create-subscription readme
-   [`c1b21a7`](facebook/react@c1b21a7 DEV warning if getSnapshotBeforeUpdate is defined as a static method (#&#8203;12475)
-   [`268a3f6`](facebook/react@268a3f6 unstable APIs for async rendering to test renderer (#&#8203;12478)
-   [`c44665e`](facebook/react@c44665e bug when fatal error is thrown as a result of `batch.commit` (#&#8203;12480)
-   [`7a833da`](facebook/react@7a833da) in componentDidMount() should flush synchronously even with createBatch() (#&#8203;12466)
-   [`5855e9f`](facebook/react@5855e9f warning message for setState-on-unmounted (#&#8203;12347)
-   [`15e3dff`](facebook/react@15e3dff#x27;t bail out on referential equality of Consumer&#x27;s props.children function (#&#8203;12470)
-   [`125dd16`](facebook/react@125dd16 user timing to record the timeout deadline with &#x27;waiting&#x27; events (#&#8203;12479)
-   [`96fe3b1`](facebook/react@96fe3b1 React.isValidElementType() (#&#8203;12483)
-   [`53fdc19`](facebook/react@53fdc19 react-is README to show new isValidElementType()
-   [`8650d2a`](facebook/react@8650d2a createRoot for open source builds (#&#8203;12486)
-   [`6294b67`](facebook/react@6294b67 (#&#8203;12487)
-   [`b2379d4`](facebook/react@b2379d4 package versions for release 16.3.0
-   [`9778873`](facebook/react@9778873 dependencies for react-noop-renderer
-   [`8e3d94f`](facebook/react@8e3d94f bundle sizes for 16.3.0 release

#### v16.3.1
-   [`2c3f5fb`](facebook/react@2c3f5fb React 16.3.0 changelog (#&#8203;12488)
-   [`4304475`](facebook/react@4304475 links
-   [`18ba36d`](facebook/react@18ba36d context API in Changelog to &quot;React&quot; section
-   [`59b3905`](facebook/react@59b3905 method name in changelog
-   [`fa8e678`](facebook/react@fa8e678 create-subscription&#x27;s peerDep on react to ^16.3.0 (#&#8203;12496)
-   [`0c80977`](facebook/react@0c80977 React.Fragment props without Map. (#&#8203;12504)
-   [`59dac9d`](facebook/react@59dac9d DEV performance regression by avoiding Object.assign on Fibers (#&#8203;12510)
-   [`6b99c6f`](facebook/react@6b99c6f missing changelog item
-   [`7a27ebd`](facebook/react@7a27ebd user timing to record when we are about to commit (#&#8203;12384)
-   [`4ccf58a`](facebook/react@4ccf58a context stack misalignment caused by error replay (#&#8203;12508)
-   [`6f2ea73`](facebook/react@6f2ea73 throw to separate function so performUnitOfWork does not deopt (#&#8203;12521)
-   [`ba245f6`](facebook/react@ba245f6 _context property on returned ReactContext from createContext - it&#x27;s private (#&#8203;12501)
-   [`eb6e752`](facebook/react@eb6e752 create-subscription package version (#&#8203;12526)
-   [`da4e855`](facebook/react@da4e855 @&#8203;providesModule in www bundles (#&#8203;12529)
-   [`0f2f90b`](https://github.com/facebook/react/commit/0f2f90bd9a9daf241d691bf4af3ea2e3a263c0e3)getDerivedStateFrom{Props,Catch} should update updateQueue.baseState (#&#8203;12528)
-   [`36c2939`](facebook/react@36c2939 not-yet-mounted setState warning (#&#8203;12531)
-   [`a2cc3c3`](facebook/react@a2cc3c3 up: make new warning less wordy (#&#8203;12532)
-   [`2279843`](facebook/react@2279843 yarn.lock file for 16.3.1 release
-   [`787b343`](facebook/react@787b343 package versions for release 16.3.1
-   [`dc05957`](facebook/react@dc05957 bundle sizes for 16.3.1 release
-   [`b15b165`](facebook/react@b15b165 for 16.3.1

#### v16.3.2
-   [`1c2876d`](facebook/react@1c2876d a build step to hoist warning conditions (#&#8203;12537)
-   [`5e3706c`](facebook/react@5e3706c#x27;t render bitmask-bailing consumers even if there&#x27;s a deeper matching child (#&#8203;12543)
-   [`e932e32`](https://github.com/facebook/react/commit/e932e321a88e07935224701bc4580e3dc9889afe)facebook.github.io/react -&gt; reactjs.org (#&#8203;12545)
-   [`d328e36`](facebook/react@d328e36 duplicate typeof check (#&#8203;12541)
-   [`8ec0e4a`](facebook/react@8ec0e4a Array.from() usage (#&#8203;12546)
-   [`27535e7`](facebook/react@27535e7 ReactDOM&#x27;s case warning for html tags (#&#8203;12533)
-   [`7a3416f`](facebook/react@7a3416f component stack from reactTag to React Native renderer (#&#8203;12549)
-   [`cf649b4`](facebook/react@cf649b4 TouchHistoryMath to React Native repo (#&#8203;12557)
-   [`5b16b39`](facebook/react@5b16b39 fix
-   [`6bf2797`](facebook/react@6bf2797 flushSync from React Native (#&#8203;12565)
-   [`bc753a7`](facebook/react@bc753a7 findNodeHandle in Fabric (#&#8203;12573)
-   [`181747a`](https://github.com/facebook/react/commit/181747a6cc25f3020b8561f475eca4ad2824256b)[RN] Move takeSnapshot to RN (#&#8203;12574)
-   [`20c5d97`](facebook/react@20c5d97 consistency in the comment (#&#8203;12579)
-   [`ea37545`](facebook/react@ea37545 be *a* before PlacementAndUpdate (#&#8203;12580)
-   [`76b4ba0`](facebook/react@76b4ba0 error codes for invariants on www (#&#8203;12539)
-   [`8dfb057`](facebook/react@8dfb057 invariant and instead use it from reactProdInvariant (#&#8203;12585)
-   [`f88deda`](facebook/react@f88deda more specific error if passed undefined in React.cloneElement (#&#8203;12534)
-   [`2f7bca0`](facebook/react@2f7bca0 unique reactTags for RN and Fabric (#&#8203;12587)
-   [`933f882`](facebook/react@933f882 ReactNativePropRegistry (#&#8203;12559)
-   [`40d0772`](https://github.com/facebook/react/commit/40d07724fcc801ad69e17b295b68ebea753d5977)[RN] Remove unstable_batchedUpdates and unmountComponentAtNodeAndRemoveContainer from Fabric (#&#8203;12571)
-   [`b6e0512`](facebook/react@b6e0512 eventTypes registry with view configs (#&#8203;12556)
-   [`b99d0b1`](https://github.com/facebook/react/commit/b99d0b14160150c566e091bd10b634beec9a58c3)[RN] Move view config registry to shims (#&#8203;12569)
-   [`725c054`](facebook/react@725c054 findHostInstance and findNodeHandle (#&#8203;12575)
-   [`52afbe0`](facebook/react@52afbe0 needs to be CommonJS
-   [`3eae866`](facebook/react@3eae866 language in error message. (#&#8203;12590)
-   [`b846152`](facebook/react@b846152 UMD build to test renderer package (#&#8203;12594)
-   [`3e9515e`](facebook/react@3e9515e @&#8203;providesModule in www shims
-   [`915bb53`](facebook/react@915bb53 expiration for interactive updates to 150ms in production (#&#8203;12599)
-   [`c27a998`](https://github.com/facebook/react/commit/c27a99812e75e73d9fad88c97ac8b8db452012c1)[Danger] Minor fixes (#&#8203;12606)
-   [`5dfbfe9`](facebook/react@5dfbfe9 debug performance labels for new component types (#&#8203;12609)
-   [`1591c8e`](facebook/react@1591c8e GCC (#&#8203;12618)
-   [`a4cef29`](facebook/react@a4cef29: add regression test for reading ReactCurrentOwner stateNode (#&#8203;12412)
-   [`2e1cc28`](facebook/react@2e1cc28 small typos in create-subscription readme (#&#8203;12399)
-   [`1e97a71`](facebook/react@1e97a71 documentation of the release process (#&#8203;12337)
-   [`66c44a7`](facebook/react@66c44a7 yarn.lock file for 16.3.2 release
-   [`82f67d6`](facebook/react@82f67d6 package versions for release 16.3.2
-   [`6494f6b`](facebook/react@6494f6b error codes for 16.3.2 release
-   [`3232616`](facebook/react@3232616 bundle sizes for 16.3.2 release
-   [`01402f4`](facebook/react@01402f4 16.3.2 changelog (#&#8203;12621)

</details>





---

This PR has been generated by [Renovate Bot](https://renovateapp.com).

Co-authored-by: Renovate Bot <bot@renovateapp.com>
@PerspectivesLab
Copy link

@PerspectivesLab PerspectivesLab commented Jul 12, 2018

you guyz can tell how to migrate from 'React.createContext' ??? is there a doc, or anything related ?

@TrySound
Copy link
Contributor

@TrySound TrySound commented Jul 12, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet