Warns when mutated props are passed. #5346

ManasJayanth · 2015-10-31T10:02:20Z

Attempts for fix #5335

chicoxyzzy · 2015-10-31T10:28:35Z

src/renderers/shared/reconciler/ReactCompositeComponent.js

@@ -147,6 +147,7 @@ var ReactCompositeComponentMixin = {
    // Initialize the public class
    var inst;
    var renderedElement;
+    var propsMuted = false;


did you mean mutated?

facebook-github-bot · 2015-10-31T18:17:32Z

@prometheansacrifice updated the pull request.

ManasJayanth · 2015-11-03T16:32:38Z

@jimfb Good enough?

jimfb · 2015-11-03T16:44:20Z

src/renderers/shared/reconciler/ReactCompositeComponent.js

+      if (propsMutated) {
+        warning(
+          propsMutated,
+          'Mutated props not allowed in %s(...)',


If someone is debugging, just saying "Mutated props not allowed in..." doesn't really describe what's wrong. Someone who is writing a moderately complex component might not see what the issue is.

I would say something like "Constructor (of %s) may not invoke super(...) with props that differ from the props that were initially passed in from the component's owner."

jimfb · 2015-11-03T16:46:46Z

Also, are you sure this works? I thought we set inst.props to always be publicProps (the diff that proposed changing this is what spawned the whole discussion). Anyway, we should add a unit test to assert the warning fires as expected.

ManasJayanth · 2015-11-04T20:21:39Z

@jimfb Warning does show for the component. However, it is also triggered for another component TopLevelWrapper everywhere. This leads to all warning related tests to fail.

What is TopLevelWrapper for anyways?

jimfb · 2015-11-04T21:12:36Z

@prometheansacrifice TopLevelWrapper is created at the top/root of each render tree. It is a temporary (?) hack so that we can store all top-level pending updates on composites instead of having to worry about different types of components.

I'm a little surprised that TopLevelWrapper warns, since I wouldn't expect it to be doing anything fancy with props. The entire definition (in ReactMount.js) is literally only a few lines:

var TopLevelWrapper = function() {};
TopLevelWrapper.prototype.isReactComponent = {};
if (__DEV__) {
  TopLevelWrapper.displayName = 'TopLevelWrapper';
}
TopLevelWrapper.prototype.render = function() {
  // this.props is actually a ReactElement
  return this.props;
};

Anyway, we should fix so it doesn't warn for TopLevelWrapper.

facebook-github-bot · 2015-11-05T00:53:01Z

@prometheansacrifice updated the pull request.

sophiebits · 2015-11-05T04:30:15Z

Let's also not warn if you pass up undefined (e.g., super();). In examples we've indicated that you only need to pass up props if you want to access this.props in the constructor (same with context as a second arg).

sophiebits · 2015-11-05T04:31:29Z

src/renderers/shared/reconciler/__tests__/ReactCompositeComponent-test.js

+      return <span />;
+    };
+
+    function Bar (props) {


Do you need Foo at all? Why can't Bar extend React.Component directly?

Also, can you use ES6 class syntax here? It's simpler.

Sure. Foo (or Bar) can directly inherit. Making the change in the next commit.

Is ES6 necessary here? I find most of the React Component definition is ES5 syntax. Simpler as it maybe, mixing up the syntax looks bad on the file as a whole.

We're slowly transitioning to ES6. You'll notice that ES6 syntaxes have been appearing in the docs too; most of the new stuff uses ES6.

Alright then.

ManasJayanth · 2015-11-07T06:07:29Z

@jimfb Is the behaviour correct in the first place? Is it okay for TopLevelWrapper to pass mutated props to super() ? Or should I ignore it in the test with a Component.displayName !== 'TopLevelWrapper'

sophiebits · 2015-11-07T06:26:32Z

TopLevelWrapper doesn't call super at all (which is allowed). Look at its definition in ReactMount. You should not ignore it with a check for its displayName.

facebook-github-bot · 2015-11-12T13:49:40Z

@prometheansacrifice updated the pull request.

facebook-github-bot · 2015-11-12T14:05:06Z

@prometheansacrifice updated the pull request.

ManasJayanth · 2015-11-12T14:12:05Z

@spicyj Added the fix. Can you please review once again?

facebook-github-bot · 2015-11-12T14:15:11Z

@prometheansacrifice updated the pull request.

sophiebits · 2015-11-12T16:43:32Z

src/renderers/shared/reconciler/ReactCompositeComponent.js

@@ -195,6 +196,18 @@ var ReactCompositeComponentMixin = {
          Component.displayName || Component.name || 'Component'
        );
      }
+
+      var propsMutated = !shallowEqual(inst.props || {}, publicProps);


This must use ===, not shallowEqual.

By ===, you mean deep comparison of objects? I remember @jimfb asking me to avoid as it is expensive.

=== just checks if they are the same reference; it is less expensive than shallowEqual.

facebook-github-bot · 2015-11-12T19:49:07Z

@prometheansacrifice updated the pull request.

ManasJayanth · 2015-11-18T04:42:11Z

@jimfb @spicyj Does this PR need more work?

sophiebits · 2015-12-17T00:09:31Z

@prometheansacrifice Sorry for the delay. This seems good – thank you.

Warns when mutated props are passed.

ManasJayanth · 2015-12-18T08:48:55Z

@spicyj Thank you too :)

facebook-github-bot added GH Review: review-needed CLA Signed labels Oct 31, 2015

chicoxyzzy reviewed Oct 31, 2015
View reviewed changes

ManasJayanth force-pushed the warn-immutable-props branch from 17104f0 to ef6aa1e Compare October 31, 2015 18:14

ManasJayanth force-pushed the warn-immutable-props branch from ef6aa1e to 45a49a0 Compare November 2, 2015 17:59

jimfb reviewed Nov 3, 2015
View reviewed changes

ManasJayanth force-pushed the warn-immutable-props branch from 45a49a0 to b05ffdd Compare November 4, 2015 20:12

sophiebits reviewed Nov 5, 2015
View reviewed changes

sophiebits added GH Review: needs-revision and removed GH Review: review-needed labels Nov 5, 2015

ManasJayanth changed the title ~~Warns when muted props are passed.~~ Warns when mutated props are passed. Nov 5, 2015

ManasJayanth force-pushed the warn-immutable-props branch from b05ffdd to 04e9539 Compare November 12, 2015 13:45

facebook-github-bot added GH Review: review-needed and removed GH Review: needs-revision labels Nov 12, 2015

ManasJayanth force-pushed the warn-immutable-props branch from 04e9539 to 8a9b3df Compare November 12, 2015 14:03

ManasJayanth force-pushed the warn-immutable-props branch from 8a9b3df to 7a86969 Compare November 12, 2015 14:09

sophiebits reviewed Nov 12, 2015
View reviewed changes

sophiebits added GH Review: needs-revision and removed GH Review: review-needed labels Nov 12, 2015

Warns when mutated props are passed.

593a234

ManasJayanth force-pushed the warn-immutable-props branch from 7a86969 to 593a234 Compare November 12, 2015 19:46

facebook-github-bot added GH Review: review-needed and removed GH Review: needs-revision labels Nov 12, 2015

sophiebits added a commit that referenced this pull request Dec 17, 2015

Merge pull request #5346 from prometheansacrifice/warn-immutable-props

963b3ca

Warns when mutated props are passed.

sophiebits merged commit 963b3ca into facebook:master Dec 17, 2015

renovate bot mentioned this pull request Feb 2, 2018

Update dependency react to v0.14.9 - autoclosed signavio/backbone-rel#29

Closed

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Warns when mutated props are passed. #5346

Warns when mutated props are passed. #5346

ManasJayanth commented Oct 31, 2015

chicoxyzzy Oct 31, 2015

facebook-github-bot commented Oct 31, 2015

ManasJayanth commented Nov 3, 2015

jimfb Nov 3, 2015

ManasJayanth Nov 3, 2015

jimfb commented Nov 3, 2015

ManasJayanth commented Nov 4, 2015

jimfb commented Nov 4, 2015

facebook-github-bot commented Nov 5, 2015

sophiebits commented Nov 5, 2015

sophiebits Nov 5, 2015

ManasJayanth Nov 5, 2015

jimfb Nov 5, 2015

ManasJayanth Nov 5, 2015

ManasJayanth commented Nov 7, 2015

sophiebits commented Nov 7, 2015

facebook-github-bot commented Nov 12, 2015

facebook-github-bot commented Nov 12, 2015

ManasJayanth commented Nov 12, 2015

facebook-github-bot commented Nov 12, 2015

sophiebits Nov 12, 2015

ManasJayanth Nov 12, 2015

sophiebits Nov 12, 2015

facebook-github-bot commented Nov 12, 2015

ManasJayanth commented Nov 18, 2015

sophiebits commented Dec 17, 2015

ManasJayanth commented Dec 18, 2015

Warns when mutated props are passed. #5346

Warns when mutated props are passed. #5346

Conversation

ManasJayanth commented Oct 31, 2015

Choose a reason for hiding this comment

facebook-github-bot commented Oct 31, 2015

ManasJayanth commented Nov 3, 2015

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jimfb commented Nov 3, 2015

ManasJayanth commented Nov 4, 2015

jimfb commented Nov 4, 2015

facebook-github-bot commented Nov 5, 2015

sophiebits commented Nov 5, 2015

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ManasJayanth commented Nov 7, 2015

sophiebits commented Nov 7, 2015

facebook-github-bot commented Nov 12, 2015

facebook-github-bot commented Nov 12, 2015

ManasJayanth commented Nov 12, 2015

facebook-github-bot commented Nov 12, 2015

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

facebook-github-bot commented Nov 12, 2015

ManasJayanth commented Nov 18, 2015

sophiebits commented Dec 17, 2015

ManasJayanth commented Dec 18, 2015