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

Inject overrideProps() fn to DevTools #14427

Conversation

bvaughn
Copy link
Contributor

@bvaughn bvaughn commented Dec 12, 2018

This function will enable editing props for function components, host nodes, and special types like memo and forwardRef.

Copying the update logic into React will also enable us to add more complex behavior in the future– such as the ability to override props in a way that won't get overridden unless the component is re-rendered with a new props value.

Demo

Here's a demo that shows me editing a Context.Provider value, React.memo and React.forwardRef props, host node props, and function component props.
kapture 2018-12-12 at 15 40 18

Unblocks facebook/react-devtools/pull/1249

This function will enable editing props for function components, host nodes, and special types like memo and forwardRef.
if (fiber.alternate) {
fiber.alternate.pendingProps = fiber.pendingProps;
}
flushPassiveEffects();
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 after setting the pendingProps? What if these effects synchronously renderers an update to this tree?

Copy link
Contributor Author

@bvaughn bvaughn Dec 13, 2018

Choose a reason for hiding this comment

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

Somewhat arbitrary (so I'll move it).

Seems a little weird either way, since such a synchronous re-renderer would mean we're reading from stale memoizedProps when we do our copy.

@sizebot
Copy link

sizebot commented Dec 12, 2018

ReactDOM: size: 0.0%, gzip: 0.0%

Details of bundled changes.

Comparing: a22880e...3c84766

react-dom

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-dom.development.js +0.1% +0.2% 723.78 KB 724.65 KB 167.25 KB 167.54 KB UMD_DEV
react-dom.production.min.js 0.0% 0.0% 97.8 KB 97.81 KB 31.84 KB 31.86 KB UMD_PROD
react-dom.profiling.min.js 0.0% 0.0% 100.78 KB 100.8 KB 32.55 KB 32.56 KB UMD_PROFILING
react-dom.development.js +0.1% +0.2% 718.83 KB 719.7 KB 165.85 KB 166.14 KB NODE_DEV
react-dom.production.min.js 0.0% 0.0% 97.79 KB 97.81 KB 31.38 KB 31.39 KB NODE_PROD
react-dom.profiling.min.js 0.0% 0.0% 100.88 KB 100.89 KB 31.99 KB 32 KB NODE_PROFILING
ReactDOM-dev.js +0.1% +0.2% 740.23 KB 741.1 KB 166.85 KB 167.13 KB FB_WWW_DEV
ReactDOM-prod.js 0.0% 0.0% 308.18 KB 308.21 KB 56.78 KB 56.79 KB FB_WWW_PROD
ReactDOM-profiling.js 0.0% 0.0% 315.07 KB 315.1 KB 58.21 KB 58.22 KB FB_WWW_PROFILING
react-dom-unstable-fire.development.js +0.1% +0.2% 724.06 KB 724.93 KB 167.36 KB 167.65 KB UMD_DEV
react-dom-unstable-fire.production.min.js 0.0% 0.0% 97.81 KB 97.83 KB 31.85 KB 31.86 KB UMD_PROD
react-dom-unstable-fire.profiling.min.js 0.0% 0.0% 100.8 KB 100.81 KB 32.55 KB 32.57 KB UMD_PROFILING
react-dom-unstable-fire.development.js +0.1% +0.2% 719.11 KB 719.98 KB 165.97 KB 166.25 KB NODE_DEV
react-dom-unstable-fire.production.min.js 0.0% 0.0% 97.8 KB 97.82 KB 31.39 KB 31.4 KB NODE_PROD
react-dom-unstable-fire.profiling.min.js 0.0% 0.0% 100.89 KB 100.91 KB 32 KB 32.01 KB NODE_PROFILING
ReactFire-dev.js +0.1% +0.2% 739.38 KB 740.25 KB 166.79 KB 167.06 KB FB_WWW_DEV
ReactFire-prod.js 0.0% 0.0% 296.77 KB 296.8 KB 54.35 KB 54.37 KB FB_WWW_PROD
ReactFire-profiling.js 0.0% 0.0% 303.59 KB 303.62 KB 55.82 KB 55.84 KB FB_WWW_PROFILING
react-dom-test-utils.development.js 0.0% 0.0% 44.87 KB 44.87 KB 12.3 KB 12.3 KB UMD_DEV
react-dom-test-utils.production.min.js 0.0% 🔺+0.1% 9.97 KB 9.97 KB 3.71 KB 3.71 KB UMD_PROD
react-dom-test-utils.development.js 0.0% 0.0% 44.59 KB 44.59 KB 12.24 KB 12.24 KB NODE_DEV
react-dom-test-utils.production.min.js 0.0% 0.0% 9.74 KB 9.74 KB 3.65 KB 3.65 KB NODE_PROD
react-dom-unstable-native-dependencies.development.js 0.0% 0.0% 60.61 KB 60.61 KB 15.92 KB 15.92 KB UMD_DEV
react-dom-unstable-native-dependencies.development.js 0.0% 0.0% 60.29 KB 60.29 KB 15.79 KB 15.79 KB NODE_DEV
react-dom-server.browser.development.js 0.0% 0.0% 123.89 KB 123.89 KB 33.09 KB 33.09 KB UMD_DEV
react-dom-server.browser.production.min.js 0.0% 0.0% 16.99 KB 16.99 KB 6.53 KB 6.53 KB UMD_PROD
react-dom-server.browser.development.js 0.0% 0.0% 120.02 KB 120.02 KB 32.16 KB 32.16 KB NODE_DEV
react-dom-server.browser.production.min.js 0.0% 0.0% 16.9 KB 16.9 KB 6.52 KB 6.52 KB NODE_PROD
ReactDOMServer-dev.js 0.0% 0.0% 121.2 KB 121.2 KB 31.79 KB 31.8 KB FB_WWW_DEV
ReactDOMServer-prod.js 0.0% 0.0% 44.42 KB 44.42 KB 10.3 KB 10.3 KB FB_WWW_PROD
react-dom-server.node.development.js 0.0% 0.0% 122.08 KB 122.08 KB 32.7 KB 32.71 KB NODE_DEV
react-dom-server.node.production.min.js 0.0% 0.0% 17.77 KB 17.77 KB 6.83 KB 6.83 KB NODE_PROD
react-dom-unstable-fizz.browser.development.js 0.0% +0.1% 3.63 KB 3.63 KB 1.44 KB 1.44 KB UMD_DEV
react-dom-unstable-fizz.browser.production.min.js 0.0% 🔺+0.1% 1.21 KB 1.21 KB 706 B 707 B UMD_PROD
react-dom-unstable-fizz.browser.development.js 0.0% +0.1% 3.45 KB 3.45 KB 1.39 KB 1.39 KB NODE_DEV
react-dom-unstable-fizz.browser.production.min.js 0.0% 🔺+0.2% 1.05 KB 1.05 KB 637 B 638 B NODE_PROD
react-dom-unstable-fizz.node.development.js 0.0% +0.2% 3.7 KB 3.7 KB 1.42 KB 1.42 KB NODE_DEV
react-dom-unstable-fizz.node.production.min.js 0.0% 🔺+0.1% 1.1 KB 1.1 KB 667 B 668 B NODE_PROD

react-art

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-art.development.js +0.2% +0.2% 504.18 KB 505.05 KB 111.12 KB 111.4 KB UMD_DEV
react-art.production.min.js 0.0% 0.0% 89.96 KB 89.98 KB 27.66 KB 27.67 KB UMD_PROD
react-art.development.js +0.2% +0.3% 435.67 KB 436.54 KB 94.02 KB 94.28 KB NODE_DEV
react-art.production.min.js 0.0% 🔺+0.1% 54.93 KB 54.95 KB 16.99 KB 17 KB NODE_PROD
ReactART-dev.js +0.2% +0.3% 443.9 KB 444.78 KB 92.97 KB 93.25 KB FB_WWW_DEV
ReactART-prod.js 0.0% 0.0% 183.62 KB 183.65 KB 31.39 KB 31.41 KB FB_WWW_PROD

react-native-renderer

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
ReactNativeRenderer-dev.js +0.2% +0.2% 568.59 KB 569.47 KB 123.54 KB 123.8 KB RN_FB_DEV
ReactNativeRenderer-prod.js 0.0% 0.0% 238.83 KB 238.86 KB 42 KB 42.01 KB RN_FB_PROD
ReactNativeRenderer-profiling.js 0.0% 0.0% 244.7 KB 244.73 KB 43.36 KB 43.38 KB RN_FB_PROFILING
ReactNativeRenderer-dev.js +0.2% +0.2% 568.29 KB 569.17 KB 123.46 KB 123.72 KB RN_OSS_DEV
ReactNativeRenderer-prod.js 0.0% 0.0% 224.35 KB 224.38 KB 38.96 KB 38.97 KB RN_OSS_PROD
ReactNativeRenderer-profiling.js 0.0% 0.0% 230.09 KB 230.12 KB 40.3 KB 40.31 KB RN_OSS_PROFILING
ReactFabric-dev.js +0.2% +0.2% 559.1 KB 559.98 KB 121.1 KB 121.39 KB RN_FB_DEV
ReactFabric-prod.js 0.0% 0.0% 233.34 KB 233.37 KB 40.77 KB 40.78 KB RN_FB_PROD
ReactFabric-profiling.js 0.0% 0.0% 238.3 KB 238.33 KB 42.12 KB 42.13 KB RN_FB_PROFILING
ReactFabric-dev.js +0.2% +0.2% 559.13 KB 560.01 KB 121.12 KB 121.4 KB RN_OSS_DEV
ReactFabric-prod.js 0.0% 0.0% 218.53 KB 218.55 KB 37.71 KB 37.72 KB RN_OSS_PROD
ReactFabric-profiling.js 0.0% 0.0% 223.28 KB 223.31 KB 39.12 KB 39.13 KB RN_OSS_PROFILING

react-test-renderer

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-test-renderer.development.js +0.2% +0.3% 448.89 KB 449.77 KB 96.8 KB 97.06 KB UMD_DEV
react-test-renderer.production.min.js 0.0% 🔺+0.1% 56.26 KB 56.28 KB 17.26 KB 17.28 KB UMD_PROD
react-test-renderer.development.js +0.2% +0.3% 443.85 KB 444.72 KB 95.58 KB 95.84 KB NODE_DEV
react-test-renderer.production.min.js 0.0% 🔺+0.1% 55.92 KB 55.94 KB 17.11 KB 17.13 KB NODE_PROD
ReactTestRenderer-dev.js +0.2% +0.3% 452.27 KB 453.15 KB 94.87 KB 95.12 KB FB_WWW_DEV
react-test-renderer-shallow.development.js 0.0% 0.0% 25.88 KB 25.88 KB 7.06 KB 7.06 KB UMD_DEV
react-test-renderer-shallow.production.min.js 0.0% 🔺+0.1% 7.31 KB 7.31 KB 2.39 KB 2.39 KB UMD_PROD
react-test-renderer-shallow.development.js 0.0% 0.0% 20.18 KB 20.18 KB 5.61 KB 5.61 KB NODE_DEV
react-test-renderer-shallow.production.min.js 0.0% 0.0% 7.96 KB 7.96 KB 2.64 KB 2.64 KB NODE_PROD

react-reconciler

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-reconciler.development.js +0.2% +0.3% 433.5 KB 434.37 KB 92.51 KB 92.79 KB NODE_DEV
react-reconciler.production.min.js 0.0% 🔺+0.1% 56.05 KB 56.07 KB 16.82 KB 16.83 KB NODE_PROD
react-reconciler-persistent.development.js +0.2% +0.3% 431.88 KB 432.75 KB 91.86 KB 92.14 KB NODE_DEV
react-reconciler-persistent.production.min.js 0.0% 🔺+0.1% 56.06 KB 56.08 KB 16.83 KB 16.84 KB NODE_PROD
react-reconciler-reflection.development.js 0.0% 0.0% 15.4 KB 15.4 KB 4.83 KB 4.84 KB NODE_DEV
react-reconciler-reflection.production.min.js 0.0% 🔺+0.3% 2.56 KB 2.56 KB 1.13 KB 1.14 KB NODE_PROD

Generated by 🚫 dangerJS

Copy link
Collaborator

@sebmarkbage sebmarkbage left a comment

Choose a reason for hiding this comment

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

In the future we might add a resetPropsOverride(fiber, path) to unshadow it. E.g. in the case where we have a more persistent override mechanism.

@bvaughn bvaughn merged commit 7325ebe into facebook:master Dec 13, 2018
@bvaughn bvaughn deleted the support-DevTools-prop-updates-for-non-class-components branch December 13, 2018 17:41
jetoneza pushed a commit to jetoneza/react that referenced this pull request Jan 23, 2019
* Inject overrideProps() fn to DevTools

This function will enable editing props for function components, host nodes, and special types like memo and forwardRef.
n8schloss pushed a commit to n8schloss/react that referenced this pull request Jan 31, 2019
* Inject overrideProps() fn to DevTools

This function will enable editing props for function components, host nodes, and special types like memo and forwardRef.
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.

None yet

4 participants