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

rename this tip to be less confusing #650

Merged
merged 5 commits into from
Dec 18, 2013
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
24 changes: 23 additions & 1 deletion docs/tips/10-props-in-getInitialState-as-anti-pattern.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ next: dom-event-listeners.html

Using props, passed down from parent, to generate state in `getInitialState` often leads to duplication of "source of truth", i.e. where the real data is. Whenever possible, compute values on-the-fly to ensure that they don't get out of sync later on and cause maintenance trouble.

Bad example:
**Bad example:**

```js
/** @jsx React.DOM */
Expand Down Expand Up @@ -60,3 +60,25 @@ var MessageBox = React.createClass({

React.renderComponent(<MessageBox name="Rogers"/>, mountNode);
```

However, it's **not** an anti-pattern if you intentionally make it clear that synchronization's not the goal here:

```js
/** @jsx React.DOM */

var Counter = React.createClass({
getInitialState: function() {
// naming it initialX clearly indicates that the only purpose
// of the passed down prop is to initialize something internal
return {count: this.props.initialCount};
},
handleClick: function() {
this.setState({count: this.state.count + 1});
},
render: function() {
return <div onClick={this.handleClick}>{this.state.count}</div>;
}
});

React.renderComponent(<Counter initialCount={7}/>, mountNode);
```