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

pure #13748

Merged
merged 2 commits into from Sep 27, 2018

Conversation

Projects
None yet
10 participants
@acdlite
Member

acdlite commented Sep 27, 2018

Note: the discussion for this proposal is in reactjs/rfcs#63. It has since been renamed to React.memo().

A higher-order component version of the React.PureComponent class. During an update, the previous props are compared to the new props. If they are the same, React will skip rendering the component and its children.

Unlike userspace implementations, pure will not add an additional fiber to the tree.

The first argument must be a functional component; it does not work with classes.

pure uses shallow comparison by default, like React.PureComponent. A custom comparison can be passed as the second argument.

pure
A higher-order component version of the `React.PureComponent` class.
During an update, the previous props are compared to the new props. If
they are the same, React will skip rendering the component and
its children.

Unlike userspace implementations, `pure` will not add an additional
fiber to the tree.

The first argument must be a functional component; it does not work
with classes.

`pure` uses shallow comparison by default, like `React.PureComponent`.
A custom comparison can be passed as the second argument.

Co-authored-by: Andrew Clark <acdlite@fb.com>
Co-authored-by: Sophie Alpert <sophiebits@fb.com>
@sizebot

This comment has been minimized.

sizebot commented Sep 27, 2018

React: size: 🔺+0.9%, gzip: 🔺+0.8%

ReactDOM: size: 🔺+0.6%, gzip: 🔺+0.7%

Details of bundled changes.

Comparing: 4d17c3f...645a8ba

react

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react.development.js +0.8% +0.7% 91.03 KB 91.78 KB 24.15 KB 24.32 KB UMD_DEV
react.production.min.js 🔺+0.9% 🔺+0.8% 11.54 KB 11.65 KB 4.55 KB 4.59 KB UMD_PROD
react.development.js +1.4% +0.9% 55.36 KB 56.12 KB 15.24 KB 15.38 KB NODE_DEV
react.production.min.js 🔺+1.8% 🔺+1.1% 5.99 KB 6.1 KB 2.56 KB 2.59 KB NODE_PROD
React-dev.js +1.6% +1.0% 51.72 KB 52.56 KB 14.33 KB 14.47 KB FB_WWW_DEV
React-prod.js 🔺+1.6% 🔺+1.4% 13.94 KB 14.17 KB 3.89 KB 3.94 KB FB_WWW_PROD
React-profiling.js +1.6% +1.4% 13.94 KB 14.17 KB 3.89 KB 3.94 KB FB_WWW_PROFILING
react.profiling.min.js +0.8% +0.5% 13.69 KB 13.8 KB 5.08 KB 5.1 KB UMD_PROFILING

react-dom

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-dom.development.js +0.4% +0.2% 654.8 KB 657.45 KB 153.16 KB 153.47 KB UMD_DEV
react-dom.production.min.js 🔺+0.6% 🔺+0.7% 92.65 KB 93.18 KB 30.11 KB 30.31 KB UMD_PROD
react-dom.development.js +0.4% +0.2% 650.14 KB 652.79 KB 151.78 KB 152.09 KB NODE_DEV
react-dom.production.min.js 🔺+0.6% 🔺+0.5% 92.64 KB 93.17 KB 29.74 KB 29.88 KB NODE_PROD
ReactDOM-dev.js +0.4% +0.2% 667 KB 669.84 KB 152.39 KB 152.73 KB FB_WWW_DEV
ReactDOM-prod.js 🔺+0.8% 🔺+0.5% 285.07 KB 287.26 KB 52.58 KB 52.83 KB FB_WWW_PROD
react-dom.profiling.min.js +0.6% +0.5% 95.63 KB 96.16 KB 30.4 KB 30.55 KB NODE_PROFILING
ReactDOM-profiling.js +0.8% +0.4% 291.91 KB 294.1 KB 54.05 KB 54.29 KB FB_WWW_PROFILING
react-dom.profiling.min.js +0.6% +0.5% 95.57 KB 96.1 KB 30.84 KB 30.99 KB UMD_PROFILING

react-art

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-art.development.js +0.6% +0.3% 444.78 KB 447.4 KB 99.56 KB 99.87 KB UMD_DEV
react-art.production.min.js 🔺+0.6% 🔺+0.5% 85.08 KB 85.62 KB 26.05 KB 26.18 KB UMD_PROD
react-art.development.js +0.7% +0.4% 376.52 KB 379.17 KB 82.39 KB 82.7 KB NODE_DEV
react-art.production.min.js 🔺+1.1% 🔺+0.9% 50.05 KB 50.58 KB 15.31 KB 15.44 KB NODE_PROD
ReactART-dev.js +0.7% +0.4% 380.14 KB 382.99 KB 80.83 KB 81.16 KB FB_WWW_DEV
ReactART-prod.js 🔺+1.4% 🔺+0.7% 160.84 KB 163.09 KB 27.23 KB 27.43 KB FB_WWW_PROD

react-test-renderer

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-test-renderer.development.js +0.7% +0.4% 388.45 KB 391.18 KB 84.92 KB 85.25 KB UMD_DEV
react-test-renderer.production.min.js 🔺+1.1% 🔺+0.8% 51.25 KB 51.8 KB 15.6 KB 15.72 KB UMD_PROD
react-test-renderer.development.js +0.7% +0.4% 384.02 KB 386.75 KB 83.8 KB 84.13 KB NODE_DEV
react-test-renderer.production.min.js 🔺+1.1% 🔺+0.9% 50.96 KB 51.52 KB 15.43 KB 15.57 KB NODE_PROD
ReactTestRenderer-dev.js +0.8% +0.4% 387.79 KB 390.72 KB 82.51 KB 82.86 KB FB_WWW_DEV

react-reconciler

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-reconciler.development.js +0.7% +0.4% 372.35 KB 375 KB 80.5 KB 80.81 KB NODE_DEV
react-reconciler.production.min.js 🔺+1.1% 🔺+0.9% 49.74 KB 50.27 KB 14.86 KB 14.99 KB NODE_PROD
react-reconciler-persistent.development.js +0.7% +0.4% 370.79 KB 373.43 KB 79.87 KB 80.17 KB NODE_DEV
react-reconciler-persistent.production.min.js 🔺+1.1% 🔺+0.9% 49.75 KB 50.29 KB 14.87 KB 15 KB NODE_PROD

react-native-renderer

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
ReactNativeRenderer-dev.js +0.6% +0.3% 504.01 KB 506.86 KB 111.33 KB 111.66 KB RN_FB_DEV
ReactNativeRenderer-prod.js 🔺+1.1% 🔺+0.8% 215.72 KB 218.19 KB 37.57 KB 37.85 KB RN_FB_PROD
ReactNativeRenderer-dev.js +0.6% +0.3% 503.67 KB 506.52 KB 111.24 KB 111.57 KB RN_OSS_DEV
ReactNativeRenderer-prod.js 🔺+1.1% 🔺+0.8% 205.54 KB 207.87 KB 35.92 KB 36.21 KB RN_OSS_PROD
ReactFabric-dev.js +0.6% +0.3% 494.12 KB 496.97 KB 108.88 KB 109.22 KB RN_FB_DEV
ReactFabric-prod.js 🔺+1.2% 🔺+0.8% 197.96 KB 200.29 KB 34.46 KB 34.74 KB RN_FB_PROD
ReactFabric-dev.js +0.6% +0.3% 494.16 KB 497 KB 108.9 KB 109.23 KB RN_OSS_DEV
ReactFabric-prod.js 🔺+1.2% 🔺+0.8% 197.99 KB 200.32 KB 34.47 KB 34.76 KB RN_OSS_PROD
ReactNativeRenderer-profiling.js +1.1% +0.7% 213.19 KB 215.52 KB 37.42 KB 37.68 KB RN_OSS_PROFILING
ReactFabric-profiling.js +1.1% +0.7% 205.1 KB 207.43 KB 35.98 KB 36.23 KB RN_OSS_PROFILING
ReactNativeRenderer-profiling.js +1.1% +0.7% 221.68 KB 224.15 KB 38.91 KB 39.2 KB RN_FB_PROFILING
ReactFabric-profiling.js +1.1% +0.7% 205.06 KB 207.39 KB 35.96 KB 36.22 KB RN_FB_PROFILING

scheduler

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
scheduler.development.js n/a n/a 0 B 19.17 KB 0 B 5.74 KB UMD_DEV
scheduler.production.min.js n/a n/a 0 B 3.16 KB 0 B 1.53 KB UMD_PROD

Generated by 🚫 dangerJS

workInProgress.childExpirationTime = current.childExpirationTime;
if (pendingProps !== current.pendingProps) {

This comment has been minimized.

@sophiebits

sophiebits Sep 27, 2018

Member

What's the significance of this change?

This comment has been minimized.

@acdlite

acdlite Sep 27, 2018

Member

Previously the expirationTime field represented the pending priority of props, state, and context. In the begin phase, we check if this is lower priority than the render priority. If so, we can bail out.

After this change, it represents only the pending priority of state and context. The props check is moved to the begin phase. That way, in the begin phase, we can distinguish between an update caused by props versus an update caused by state or context. pure will never bail out if state or context has changed.

@@ -124,7 +127,7 @@ export function reconcileChildren(
current: Fiber | null,
workInProgress: Fiber,
nextChildren: any,
renderExpirationTime: ExpirationTime,

This comment has been minimized.

@sophiebits

sophiebits Sep 27, 2018

Member

Why is this here? Did prettier change?

if (isLegacyContextProvider(Component)) {
pushLegacyContextProvider(workInProgress);
if (current !== null) {

This comment has been minimized.

@sophiebits

sophiebits Sep 27, 2018

Member

I don't understand the significance of these changes either.

This comment has been minimized.

@acdlite
} else {
const prototype = render.prototype;
if (!!(prototype && prototype.isReactComponent)) {
warningWithoutStack(

This comment has been minimized.

@sophiebits

sophiebits Sep 27, 2018

Member

Unit tests for the warnings pls?

This comment has been minimized.

@sophiebits

sophiebits Sep 27, 2018

Member

sorry I could have also done this

);
}
case PureComponentLazy: {

This comment has been minimized.

@sophiebits

sophiebits Sep 27, 2018

Member

this duplication kills me a little bit :)

This comment has been minimized.

@acdlite

acdlite Sep 27, 2018

Member

Me too :D

@acdlite acdlite merged commit a0733fe into facebook:master Sep 27, 2018

1 check passed

ci/circleci Your tests passed on CircleCI!
Details
@dimitropoulos

This comment has been minimized.

dimitropoulos commented Sep 28, 2018

you missed a golden opportunity to call this withPurity, my friend. thanks for the great stuff @acdlite

@alexeyraspopov

This comment has been minimized.

Contributor

alexeyraspopov commented Sep 28, 2018

It seems to be the first time React includes HOC in its public API. Do we need to expect some sort of new guides on when and how to use it?

@NE-SmallTown

This comment has been minimized.

Contributor

NE-SmallTown commented Sep 28, 2018

Agree with @alexbaumgertner , but IMO they will do that but just seems don't have much time currently, so before the release there will be blog post

@bvaughn

This comment has been minimized.

Contributor

bvaughn commented Sep 28, 2018

@acdlite Will DevTools need to be updated to recognize the new REACT_PURE_TYPE?

@gaearon

This comment has been minimized.

Member

gaearon commented Sep 28, 2018

@alexeyraspopov We always include guides/docs/etc with releases. This is not a release yet.

@gaearon gaearon deleted the acdlite:pure branch Sep 28, 2018

@bvaughn

This comment has been minimized.

Contributor

bvaughn commented Sep 28, 2018

@probablyup

This comment has been minimized.

Contributor

probablyup commented Sep 29, 2018

Maybe I'm misremembering, but wasn't one of the design goals of SFC to be pure by default?

@gaearon

This comment has been minimized.

Member

gaearon commented Sep 29, 2018

The goal was to make components easier to optimize. There are many ways to optimize, memoization based on shallow equality is just one possible optimization you can make.

Functions already have less overhead since 16 (less property checks and memory usage), and they're also much more optimizable by compilers. Unfortunately our compilation experiments are still very early.

@probablyup

This comment has been minimized.

Contributor

probablyup commented Sep 29, 2018

Thanks for the explainer @gaearon 😄

@istarkov istarkov referenced this pull request Oct 1, 2018

Merged

Remove fbjs dependency #744

acdlite added a commit to plievone/react that referenced this pull request Oct 5, 2018

pure (facebook#13748)
* pure

A higher-order component version of the `React.PureComponent` class.
During an update, the previous props are compared to the new props. If
they are the same, React will skip rendering the component and
its children.

Unlike userspace implementations, `pure` will not add an additional
fiber to the tree.

The first argument must be a functional component; it does not work
with classes.

`pure` uses shallow comparison by default, like `React.PureComponent`.
A custom comparison can be passed as the second argument.

Co-authored-by: Andrew Clark <acdlite@fb.com>
Co-authored-by: Sophie Alpert <sophiebits@fb.com>

* Warn if first argument is not a functional component

@sebmarkbage sebmarkbage referenced this pull request Oct 16, 2018

Closed

Document React.pure #1266

@gaearon gaearon referenced this pull request Oct 23, 2018

Merged

Add 16.6.0 changelog #13927

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment