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

pure #13748

Merged
merged 2 commits into from
Sep 27, 2018
Merged

pure #13748

merged 2 commits into from
Sep 27, 2018

Conversation

acdlite
Copy link
Collaborator

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

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 <[email protected]>
Co-authored-by: Sophie Alpert <[email protected]>
@sizebot
Copy link

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) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's the significance of this change?

Copy link
Collaborator Author

@acdlite acdlite Sep 27, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is this here? Did prettier change?

if (isLegacyContextProvider(Component)) {
pushLegacyContextProvider(workInProgress);

if (current !== null) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

} else {
const prototype = render.prototype;
if (!!(prototype && prototype.isReactComponent)) {
warningWithoutStack(
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unit tests for the warnings pls?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sorry I could have also done this

);
}
case PureComponentLazy: {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this duplication kills me a little bit :)

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Me too :D

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

dimitropoulos commented Sep 28, 2018

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

@alexeyraspopov
Copy link
Contributor

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
Copy link
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
Copy link
Contributor

bvaughn commented Sep 28, 2018

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

@gaearon
Copy link
Collaborator

gaearon commented Sep 28, 2018

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

@bvaughn
Copy link
Contributor

bvaughn commented Sep 28, 2018

@acdlite Follow up facebook/react-devtools#1173

@quantizor
Copy link
Contributor

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

@gaearon
Copy link
Collaborator

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.

@quantizor
Copy link
Contributor

Thanks for the explainer @gaearon 😄

acdlite added a commit to plievone/react that referenced this pull request Oct 5, 2018
* 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 <[email protected]>
Co-authored-by: Sophie Alpert <[email protected]>

* Warn if first argument is not a functional component
@gaearon gaearon mentioned this pull request Oct 23, 2018
jetoneza pushed a commit to jetoneza/react that referenced this pull request Jan 23, 2019
* 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 <[email protected]>
Co-authored-by: Sophie Alpert <[email protected]>

* Warn if first argument is not a functional component
NMinhNguyen referenced this pull request in enzymejs/react-shallow-renderer Jan 29, 2020
* 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 <[email protected]>
Co-authored-by: Sophie Alpert <[email protected]>

* Warn if first argument is not a functional component
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

10 participants