{"patch":"diff --git a\/docs\/cookbook\/cb-10-props-in-getInitialSate-as-anti-pattern-tip.md b\/docs\/cookbook\/cb-10-props-in-getInitialSate-as-anti-pattern-tip.md\nnew file mode 100644\nindex 0000000000..68358537fe\n--- \/dev\/null\n+++ b\/docs\/cookbook\/cb-10-props-in-getInitialSate-as-anti-pattern-tip.md\n@@ -0,0 +1,60 @@\n+---\n+id: props-in-getInitialSate-as-anti-pattern-tip\n+title: props in getInitialState is an anti-pattern\n+layout: docs\n+permalink: props-in-getInitialSate-as-anti-pattern-tip.html\n+---\n+\n+> Note:\n+>\n+> This is not really a React-specific tip, as such anti-patterns often occur in code in general; in this case, React simply points them out more clearly.\n+\n+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.\n+\n+Bad example:\n+\n+```js\n+\/** @jsx React.DOM *\/\n+\n+var MessageBox = React.createClass({\n+ getInitialState: function() {\n+ return {nameWithQualifier: \"Mr. \" + this.props.name};\n+ },\n+ render: function() {\n+ return

{this.state.nameWithQualifier}<\/div>;\n+ }\n+});\n+\n+React.renderComponent(, mountNode);\n+```\n+\n+Better:\n+\n+```js\n+\/** @jsx React.DOM *\/\n+\n+var MessageBox = React.createClass({\n+ render: function() {\n+ return

{\"Mr. \" + this.props.name}<\/div>;\n+ }\n+});\n+\n+React.renderComponent(, mountNode);\n+```\n+\n+Also works, for larger logic:\n+\n+```js\n+\/** @jsx React.DOM *\/\n+\n+var MessageBox = React.createClass({\n+ render: function() {\n+ return

{this.getNameWithQualifier(this.props.name)}<\/div>;\n+ },\n+ getNameWithQualifier: function(name) {\n+ return 'Mr. ' + name;\n+ }\n+});\n+\n+React.renderComponent(, mountNode);\n+```\ndiff --git a\/docs\/cookbook\/cb-10-props-in-getInitialSate-as-anti-pattern.md b\/docs\/cookbook\/cb-10-props-in-getInitialSate-as-anti-pattern.md\nnew file mode 100644\nindex 0000000000..fab72467a9\n--- \/dev\/null\n+++ b\/docs\/cookbook\/cb-10-props-in-getInitialSate-as-anti-pattern.md\n@@ -0,0 +1,61 @@\n+---\n+id: props-in-getInitialSate-as-anti-pattern\n+title: props in getInitialState is an anti-pattern\n+layout: docs\n+permalink: props-in-getInitialSate-as-anti-pattern.html\n+---\n+\n+### Problem\n+You're using `this.props` in a component `getInitialSate`, like so:\n+\n+```js\n+\/** @jsx React.DOM *\/\n+\n+var MessageBox = React.createClass({\n+ getInitialState: function() {\n+ return {nameWithQualifier: \"Mr. \" + this.props.name};\n+ },\n+ render: function() {\n+ return

{this.state.nameWithQualifier}<\/div>;\n+ }\n+});\n+\n+React.renderComponent(, mountNode);\n+```\n+\n+### Solution\n+Avoid this (see below for explanation). Compute it directly inside `render`:\n+\n+```js\n+\/** @jsx React.DOM *\/\n+\n+var MessageBox = React.createClass({\n+ render: function() {\n+ return

{\"Mr. \" + this.props.name}<\/div>;\n+ }\n+});\n+\n+React.renderComponent(, mountNode);\n+```\n+\n+Or, if the logic's big, isolate it so:\n+\n+```js\n+\/** @jsx React.DOM *\/\n+\n+var MessageBox = React.createClass({\n+ render: function() {\n+ return

{this.getNameWithQualifier(this.props.name)}<\/div>;\n+ },\n+ getNameWithQualifier: function(name) {\n+ return 'Mr. ' + name;\n+ }\n+});\n+\n+React.renderComponent(, mountNode);\n+```\n+\n+### Discussion\n+This is not really a React-specific tip, as such anti-patterns often occur in code in general; in this case, React simply points them out more clearly.\n+\n+Using props, passed down from parent, to generate state 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.\n","parents":["86355eb1ba0b3a8be25a7ba0f7288a4f21667ed5"],"body":"","commit":{"authoredAt":"2013-10-05T02:57:57-04:00","revision":"28f30b7ef0132b0f40b5bab2600cb82c4c24fe0e","subject":"props in `getInitialState` as anti-pattern","authorName":"Cheng Lou","authorEmail":"chenglou92@gmail.com","shortRevision":"28f30b7ef0"},"files":[{"path":"docs\/cookbook\/cb-10-props-in-getInitialSate-as-anti-pattern-tip.md","status":"A"},{"path":"docs\/cookbook\/cb-10-props-in-getInitialSate-as-anti-pattern.md","status":"A"}]}

dillon1000/react

Files changed