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

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

@acdlite acdlite force-pushed the acdlite:pure branch from df3a7c1 to a145500 Sep 27, 2018
workInProgress.childExpirationTime = current.childExpirationTime;
if (pendingProps !== current.pendingProps) {

This comment has been minimized.

@sophiebits

sophiebits Sep 27, 2018 Collaborator

What's the significance of this change?

This comment has been minimized.

@acdlite

acdlite Sep 27, 2018 Author 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 Collaborator

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 Collaborator

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

This comment has been minimized.

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

This comment has been minimized.

@sophiebits

sophiebits Sep 27, 2018 Collaborator

Unit tests for the warnings pls?

This comment has been minimized.

@sophiebits

sophiebits Sep 27, 2018 Collaborator

sorry I could have also done this

);
}
case PureComponentLazy: {

This comment has been minimized.

@sophiebits

sophiebits Sep 27, 2018 Collaborator

this duplication kills me a little bit :)

This comment has been minimized.

@acdlite

acdlite Sep 27, 2018 Author Member

Me too :D

@acdlite acdlite force-pushed the acdlite:pure branch 2 times, most recently from 5d22fe4 to 645a8ba Sep 27, 2018
@acdlite acdlite merged commit a0733fe into facebook:master Sep 27, 2018
1 check passed
1 check passed
ci/circleci Your tests passed on CircleCI!
Details
@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

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

bvaughn commented Sep 28, 2018

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

probablyup commented Sep 29, 2018

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 <acdlite@fb.com>
Co-authored-by: Sophie Alpert <sophiebits@fb.com>

* Warn if first argument is not a functional component
@gaearon gaearon mentioned this pull request Oct 23, 2018
jetoneza added 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 <acdlite@fb.com>
Co-authored-by: Sophie Alpert <sophiebits@fb.com>

* Warn if first argument is not a functional component
NMinhNguyen referenced this pull request in NMinhNguyen/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 <acdlite@fb.com>
Co-authored-by: Sophie Alpert <sophiebits@fb.com>

* 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
Linked issues

Successfully merging this pull request may close these issues.

None yet

10 participants
You can’t perform that action at this time.