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

Add warning to prevent setting this.state to this.props referentially #11658

Merged
merged 2 commits into from Aug 28, 2018

Conversation

Projects
None yet
9 participants
@veekas
Contributor

veekas commented Nov 25, 2017

Adds warning to prevent setting this.state = props. Closes #11593.

  • Passed all tests with yarn test
  • Ran yarn prettier
  • Ran yarn lint
  • Ran yarn flow
  • Completed CLA

Thanks for your help on this first PR, @sw-yx and @gaearon.

@gaearon

This comment has been minimized.

Show comment
Hide comment
@gaearon

gaearon Nov 25, 2017

Member

Most people don't know what "referentially" means.
We also need to include the component name.

I would reword this as:

It looks like the %s component contains a line like this in its constructor:

this.state = props;

This is not recommended because any further updates to props won't be reflected in the state. In most cases, you don't need to keep state and props in sync. Instead, use the props directly. If you need to calculate something from the props, do it during the rendering. If you need to share the state between several components, move it to their closest common ancestor, and pass it down as props to them.

Member

gaearon commented Nov 25, 2017

Most people don't know what "referentially" means.
We also need to include the component name.

I would reword this as:

It looks like the %s component contains a line like this in its constructor:

this.state = props;

This is not recommended because any further updates to props won't be reflected in the state. In most cases, you don't need to keep state and props in sync. Instead, use the props directly. If you need to calculate something from the props, do it during the rendering. If you need to share the state between several components, move it to their closest common ancestor, and pass it down as props to them.

@veekas

This comment has been minimized.

Show comment
Hide comment
@veekas

veekas Nov 25, 2017

Contributor

Updated to include the new warning message and component name. Ran test/prettier/linc/flow again.

Contributor

veekas commented Nov 25, 2017

Updated to include the new warning message and component name. Ran test/prettier/linc/flow again.

@veekas

This comment has been minimized.

Show comment
Hide comment
@veekas

veekas Jan 3, 2018

Contributor

Hi @gaearon and @aweary, I wanted to check on this issue. Is there anything else you would like me to do to help close it?

Contributor

veekas commented Jan 3, 2018

Hi @gaearon and @aweary, I wanted to check on this issue. Is there anything else you would like me to do to help close it?

@veekas

This comment has been minimized.

Show comment
Hide comment
@veekas

veekas Mar 16, 2018

Contributor

Looks like CircleCI is failing due to the same CI/Docker issue (nodejs/docker-node#651) referenced by @bvaughn in #12392.

#!/bin/bash -eo pipefail
yarn install
/bin/bash: yarn: command not found
Exited with code 127

Lint, flow, and tests are passing locally. Anyway, ready for your review, @gaearon!

Contributor

veekas commented Mar 16, 2018

Looks like CircleCI is failing due to the same CI/Docker issue (nodejs/docker-node#651) referenced by @bvaughn in #12392.

#!/bin/bash -eo pipefail
yarn install
/bin/bash: yarn: command not found
Exited with code 127

Lint, flow, and tests are passing locally. Anyway, ready for your review, @gaearon!

@veekas

This comment has been minimized.

Show comment
Hide comment
@veekas

veekas Apr 2, 2018

Contributor

It's been a couple weeks without comment, so I incorporated @bvaughn's and @raunofreiberg's input into the latest iteration. Thanks, you two, I think your edits make it more semantic and terse. Pinging @gaearon

Contributor

veekas commented Apr 2, 2018

It's been a couple weeks without comment, so I incorporated @bvaughn's and @raunofreiberg's input into the latest iteration. Thanks, you two, I think your edits make it more semantic and terse. Pinging @gaearon

@bvaughn

bvaughn approved these changes Apr 3, 2018

Left a nit but we could do this post-merge.

LGTM otherwise.

@gaearon

This warning should be deduplicated by component name. Otherwise it'll spam the console for any component that's used in a large number of places.

@bvaughn

This comment has been minimized.

Show comment
Hide comment
@bvaughn

bvaughn Apr 3, 2018

Contributor

Nice catch 😄

Contributor

bvaughn commented Apr 3, 2018

Nice catch 😄

@veekas

This comment has been minimized.

Show comment
Hide comment
@veekas

veekas Apr 7, 2018

Contributor

Latest commit should address @gaearon's request!

Contributor

veekas commented Apr 7, 2018

Latest commit should address @gaearon's request!

@bvaughn

bvaughn approved these changes Apr 9, 2018

👍 Looks good to me.

@veekas

This comment has been minimized.

Show comment
Hide comment
@veekas

veekas Apr 16, 2018

Contributor

Hey @gaearon or @bvaughn, anything else I can do to help get this merged?

Contributor

veekas commented Apr 16, 2018

Hey @gaearon or @bvaughn, anything else I can do to help get this merged?

@pull-bot

This comment has been minimized.

Show comment
Hide comment
@pull-bot

pull-bot Apr 25, 2018

Details of bundled changes.

Comparing: 29287f0...4268592

react-dom

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-dom.development.js +0.1% +0.1% 649.61 KB 650.21 KB 152.61 KB 152.73 KB UMD_DEV
react-dom.development.js +0.1% +0.1% 645.75 KB 646.34 KB 151.5 KB 151.62 KB NODE_DEV
ReactDOM-dev.js +0.1% +0.1% 652.79 KB 653.44 KB 149.5 KB 149.62 KB FB_WWW_DEV

react-art

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-art.development.js +0.1% +0.1% 441.74 KB 442.33 KB 99.92 KB 100.03 KB UMD_DEV
react-art.development.js +0.2% +0.1% 374.28 KB 374.87 KB 82.82 KB 82.94 KB NODE_DEV
ReactART-dev.js +0.2% +0.1% 364.38 KB 365.04 KB 77.54 KB 77.66 KB FB_WWW_DEV

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.1% 371.11 KB 371.7 KB 81.21 KB 81.33 KB UMD_DEV
react-test-renderer.development.js +0.2% +0.1% 367.24 KB 367.83 KB 80.26 KB 80.37 KB NODE_DEV
ReactTestRenderer-dev.js +0.2% +0.1% 372.04 KB 372.69 KB 79.21 KB 79.33 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.2% +0.2% 355.33 KB 355.93 KB 76.89 KB 77 KB NODE_DEV
react-reconciler-persistent.development.js +0.2% +0.2% 353.9 KB 354.49 KB 76.31 KB 76.42 KB NODE_DEV

react-native-renderer

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
ReactNativeRenderer-dev.js +0.1% +0.1% 486.01 KB 486.67 KB 107.52 KB 107.63 KB RN_FB_DEV
ReactNativeRenderer-dev.js +0.1% +0.1% 485.75 KB 486.4 KB 107.46 KB 107.57 KB RN_OSS_DEV
ReactFabric-dev.js +0.1% +0.1% 476.2 KB 476.85 KB 105.09 KB 105.2 KB RN_FB_DEV
ReactFabric-dev.js +0.1% +0.1% 476.23 KB 476.89 KB 105.11 KB 105.22 KB RN_OSS_DEV

Generated by 🚫 dangerJS

pull-bot commented Apr 25, 2018

Details of bundled changes.

Comparing: 29287f0...4268592

react-dom

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-dom.development.js +0.1% +0.1% 649.61 KB 650.21 KB 152.61 KB 152.73 KB UMD_DEV
react-dom.development.js +0.1% +0.1% 645.75 KB 646.34 KB 151.5 KB 151.62 KB NODE_DEV
ReactDOM-dev.js +0.1% +0.1% 652.79 KB 653.44 KB 149.5 KB 149.62 KB FB_WWW_DEV

react-art

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-art.development.js +0.1% +0.1% 441.74 KB 442.33 KB 99.92 KB 100.03 KB UMD_DEV
react-art.development.js +0.2% +0.1% 374.28 KB 374.87 KB 82.82 KB 82.94 KB NODE_DEV
ReactART-dev.js +0.2% +0.1% 364.38 KB 365.04 KB 77.54 KB 77.66 KB FB_WWW_DEV

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.1% 371.11 KB 371.7 KB 81.21 KB 81.33 KB UMD_DEV
react-test-renderer.development.js +0.2% +0.1% 367.24 KB 367.83 KB 80.26 KB 80.37 KB NODE_DEV
ReactTestRenderer-dev.js +0.2% +0.1% 372.04 KB 372.69 KB 79.21 KB 79.33 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.2% +0.2% 355.33 KB 355.93 KB 76.89 KB 77 KB NODE_DEV
react-reconciler-persistent.development.js +0.2% +0.2% 353.9 KB 354.49 KB 76.31 KB 76.42 KB NODE_DEV

react-native-renderer

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
ReactNativeRenderer-dev.js +0.1% +0.1% 486.01 KB 486.67 KB 107.52 KB 107.63 KB RN_FB_DEV
ReactNativeRenderer-dev.js +0.1% +0.1% 485.75 KB 486.4 KB 107.46 KB 107.57 KB RN_OSS_DEV
ReactFabric-dev.js +0.1% +0.1% 476.2 KB 476.85 KB 105.09 KB 105.2 KB RN_FB_DEV
ReactFabric-dev.js +0.1% +0.1% 476.23 KB 476.89 KB 105.11 KB 105.22 KB RN_OSS_DEV

Generated by 🚫 dangerJS

@veekas

This comment has been minimized.

Show comment
Hide comment
@veekas

veekas Apr 27, 2018

Contributor

Hey @gaearon, just want to ping you again about this PR

Contributor

veekas commented Apr 27, 2018

Hey @gaearon, just want to ping you again about this PR

@veekas

This comment has been minimized.

Show comment
Hide comment
@veekas

veekas Aug 28, 2018

Contributor

Hi @gaearon, I've rebased/squashed my commits to fix the merge conflict that happened over the past few months. I'll give this opportunity to one of the volunteers in #11593 if any further changes are requested. Thanks!

Contributor

veekas commented Aug 28, 2018

Hi @gaearon, I've rebased/squashed my commits to fix the merge conflict that happened over the past few months. I'll give this opportunity to one of the volunteers in #11593 if any further changes are requested. Thanks!

@gaearon gaearon merged commit 672e859 into facebook:master Aug 28, 2018

1 check was pending

ci/circleci CircleCI is running your tests
Details
@gaearon

This comment has been minimized.

Show comment
Hide comment
@gaearon

gaearon Aug 28, 2018

Member

Thanks!

Member

gaearon commented Aug 28, 2018

Thanks!

@stnwk

This comment has been minimized.

Show comment
Hide comment
@stnwk

stnwk Sep 8, 2018

Is there any reason this is being outputted as an error on the console instead of a warning? @veekas @gaearon

stnwk commented Sep 8, 2018

Is there any reason this is being outputted as an error on the console instead of a warning? @veekas @gaearon

@gaearon

This comment has been minimized.

Show comment
Hide comment
@gaearon

gaearon Sep 8, 2018

Member

@stnwk We output all warnings through console.error because React warnings generally point out legitimate bugs in your code. If you're 100% confident you know why you're copying props to state like this, you can change it to this.state = {...this.props} to be explicit. But it's usually a mistake.

Member

gaearon commented Sep 8, 2018

@stnwk We output all warnings through console.error because React warnings generally point out legitimate bugs in your code. If you're 100% confident you know why you're copying props to state like this, you can change it to this.state = {...this.props} to be explicit. But it's usually a mistake.

@stnwk

This comment has been minimized.

Show comment
Hide comment
@stnwk

stnwk Sep 9, 2018

Okay, thanks for the explanation :)

stnwk commented Sep 9, 2018

Okay, thanks for the explanation :)

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