{"action":"created","issue":{"url":"https://api.github.com/repos/facebook/react/issues/12470","repository_url":"https://api.github.com/repos/facebook/react","labels_url":"https://api.github.com/repos/facebook/react/issues/12470/labels{/name}","comments_url":"https://api.github.com/repos/facebook/react/issues/12470/comments","events_url":"https://api.github.com/repos/facebook/react/issues/12470/events","html_url":"https://github.com/facebook/react/pull/12470","id":309191106,"number":12470,"title":"React Context bails out when `this.state` is updated unexpectedly","user":{"login":"iamdustan","id":227879,"avatar_url":"https://avatars3.githubusercontent.com/u/227879?v=4","gravatar_id":"","url":"https://api.github.com/users/iamdustan","html_url":"https://github.com/iamdustan","followers_url":"https://api.github.com/users/iamdustan/followers","following_url":"https://api.github.com/users/iamdustan/following{/other_user}","gists_url":"https://api.github.com/users/iamdustan/gists{/gist_id}","starred_url":"https://api.github.com/users/iamdustan/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/iamdustan/subscriptions","organizations_url":"https://api.github.com/users/iamdustan/orgs","repos_url":"https://api.github.com/users/iamdustan/repos","events_url":"https://api.github.com/users/iamdustan/events{/privacy}","received_events_url":"https://api.github.com/users/iamdustan/received_events","type":"User","site_admin":false},"labels":[{"id":196858374,"url":"https://api.github.com/repos/facebook/react/labels/CLA%20Signed","name":"CLA Signed","color":"e7e7e7","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2018-03-28T01:39:19Z","updated_at":"2018-03-28T20:14:48Z","closed_at":null,"author_association":"CONTRIBUTOR","pull_request":{"url":"https://api.github.com/repos/facebook/react/pulls/12470","html_url":"https://github.com/facebook/react/pull/12470","diff_url":"https://github.com/facebook/react/pull/12470.diff","patch_url":"https://github.com/facebook/react/pull/12470.patch"},"body":"I was playing around with the new context API and ran into some unexpected bail outs. The exact scenario was something like the following:\r\n\r\n```jsx\r\nclass React extends React.Component {\r\n  state = { name: '' };\r\n  onChange = (event) => {\r\n    const { name, value } = event.currentTarget;\r\n    this.setState({[name]: value});\r\n  };\r\n  renderChildren = (context) => {\r\n    return (\r\n      <form action={context.action}>\r\n        <input value={this.state.value} onChange={this.onChange} name=\"name\" />\r\n      </form>\r\n    );\r\n  };\r\n\r\n  render() {\r\n    return <Consumer>{this.renderChildren}</Consumer>;\r\n  }\r\n}\r\n```\r\n\r\nThe test case here is similar but without any DOM dependencies. I would expect this to “just work” but  alas. My only thoughts for “solving” this is checking if the function exists on the instance before optimistically bailing out and assuming it is pure."},"comment":{"url":"https://api.github.com/repos/facebook/react/issues/comments/377021000","html_url":"https://github.com/facebook/react/pull/12470#issuecomment-377021000","issue_url":"https://api.github.com/repos/facebook/react/issues/12470","id":377021000,"user":{"login":"sebmarkbage","id":63648,"avatar_url":"https://avatars2.githubusercontent.com/u/63648?v=4","gravatar_id":"","url":"https://api.github.com/users/sebmarkbage","html_url":"https://github.com/sebmarkbage","followers_url":"https://api.github.com/users/sebmarkbage/followers","following_url":"https://api.github.com/users/sebmarkbage/following{/other_user}","gists_url":"https://api.github.com/users/sebmarkbage/gists{/gist_id}","starred_url":"https://api.github.com/users/sebmarkbage/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sebmarkbage/subscriptions","organizations_url":"https://api.github.com/users/sebmarkbage/orgs","repos_url":"https://api.github.com/users/sebmarkbage/repos","events_url":"https://api.github.com/users/sebmarkbage/events{/privacy}","received_events_url":"https://api.github.com/users/sebmarkbage/received_events","type":"User","site_admin":false},"created_at":"2018-03-28T20:14:48Z","updated_at":"2018-03-28T20:14:48Z","author_association":"MEMBER","body":"Normally we bail out of children equality because it is very unusual to cache React elements but not impossible. E.g. this pattern would still fail to update:\r\n\r\n```js\r\nclass ... {\r\n  ...\r\n  consumer = <Ctx.Consumer>{value => <h1>Hello, {value}, {this.state.counter}</h1>}</Ctx.Consumer>;\r\n  render() {\r\n    return consumer;\r\n  }\r\n}\r\n```\r\n\r\nThere is an argument to be made that since it is common to cache closures, we shouldn't apply the same bailout strategy for render props.\r\n\r\nIt's pretty sketchy though. I think in the future, we'll just want to move away from bound closures on instances and instead always provide new closures.\r\n\r\nSo the tradeoff is whether we want to optimize for future best practices or current. If we allow this pattern now, we can't really easily unallow it later."}}
{"actor":{"display_login":"sebmarkbage"}}