From a084d924fa955cf1713f9776fbccb509dcd1ce03 Mon Sep 17 00:00:00 2001 From: Yash Joshi Date: Sat, 25 Nov 2017 10:34:10 +0530 Subject: [PATCH 1/3] Added FAQ for Synching State and props --- content/docs/faq-state.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/content/docs/faq-state.md b/content/docs/faq-state.md index f2a0826c..bd0491f6 100644 --- a/content/docs/faq-state.md +++ b/content/docs/faq-state.md @@ -6,6 +6,18 @@ layout: docs category: FAQ --- +### What Should Go in State? + +**State should contain data that a component's event handlers may change to trigger a UI update.** In real apps this data tends to be very small and JSON-serializable. When building a stateful component, think about the minimal possible representation of its state, and only store those properties in `this.state`. Inside of `render()` simply compute any other information you need based on this state. You'll find that thinking about and writing applications in this way tends to lead to the most correct application, since adding redundant or computed values to state means that you need to explicitly keep them in sync rather than rely on React computing them for you. + +### What Shouldn’t Go in State? + +`this.state` should only contain the minimal amount of data needed to represent your UI's state. As such, it should not contain: + +* **Computed data:** Don't worry about precomputing values based on state — it's easier to ensure that your UI is consistent if you do all computation within `render()`. For example, if you have an array of list items in state and you want to render the count as a string, simply render `this.state.listItems.length + ' list items'` in your `render()` method rather than storing it on state. +* **React components:** Build them in `render()` based on underlying props and state. +* **Duplicated data from props:** Try to use props as the source of truth where possible. One valid use to store props in state is to be able to know its previous values, because props can change over time. + ### What does setState do? `setState()` schedules an update to a component's `state` object. When state changes, the component responds by re-rendering. From 13ec56b1cc1bceb6800e44109ca7f3b73a7cbc11 Mon Sep 17 00:00:00 2001 From: Yash Joshi Date: Tue, 28 Nov 2017 19:52:59 +0530 Subject: [PATCH 2/3] Documented the difference between props and State --- content/docs/faq-state.md | 16 +++++----------- 1 file changed, 5 insertions(+), 11 deletions(-) diff --git a/content/docs/faq-state.md b/content/docs/faq-state.md index bd0491f6..ba43398e 100644 --- a/content/docs/faq-state.md +++ b/content/docs/faq-state.md @@ -6,21 +6,15 @@ layout: docs category: FAQ --- -### What Should Go in State? - -**State should contain data that a component's event handlers may change to trigger a UI update.** In real apps this data tends to be very small and JSON-serializable. When building a stateful component, think about the minimal possible representation of its state, and only store those properties in `this.state`. Inside of `render()` simply compute any other information you need based on this state. You'll find that thinking about and writing applications in this way tends to lead to the most correct application, since adding redundant or computed values to state means that you need to explicitly keep them in sync rather than rely on React computing them for you. - -### What Shouldn’t Go in State? +### What does setState do? -`this.state` should only contain the minimal amount of data needed to represent your UI's state. As such, it should not contain: +`setState()` schedules an update to a component's `state` object. When state changes, the component responds by re-rendering. -* **Computed data:** Don't worry about precomputing values based on state — it's easier to ensure that your UI is consistent if you do all computation within `render()`. For example, if you have an array of list items in state and you want to render the count as a string, simply render `this.state.listItems.length + ' list items'` in your `render()` method rather than storing it on state. -* **React components:** Build them in `render()` based on underlying props and state. -* **Duplicated data from props:** Try to use props as the source of truth where possible. One valid use to store props in state is to be able to know its previous values, because props can change over time. +### What is the difference between state and props? -### What does setState do? +[state](docs/state-and-lifecycle) and [props](/docs/components-and-props) are plain JS objects which cause re-render whenever they change. While both hold information relating to the component, they are used differently and should be kept separate because: -`setState()` schedules an update to a component's `state` object. When state changes, the component responds by re-rendering. +* `props` contains information set by the parent component and should not be changed whereas `state` contains private information for the component to initialise, change, and use on it’s own. ### Why is `setState` is giving me the wrong value? From e28248ec89c02bce71bd9b1b3d030d2fea3bb6e2 Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Wed, 29 Nov 2017 13:13:04 -0800 Subject: [PATCH 3/3] Wordsmithing --- content/docs/faq-state.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/content/docs/faq-state.md b/content/docs/faq-state.md index ba43398e..4c6cd07f 100644 --- a/content/docs/faq-state.md +++ b/content/docs/faq-state.md @@ -12,9 +12,11 @@ category: FAQ ### What is the difference between state and props? -[state](docs/state-and-lifecycle) and [props](/docs/components-and-props) are plain JS objects which cause re-render whenever they change. While both hold information relating to the component, they are used differently and should be kept separate because: +[`props`](/docs/components-and-props.html) (short for "properties") and [`state`](/docs/state-and-lifecycle.html) are both just JavaScript objects that trigger a re-render when changed. While both hold information that influences the output of render, they are different in one important way: `props` get passed to the component (similar to function parameters) whereas `state` is managed within the component (similar to variables declared within a function). -* `props` contains information set by the parent component and should not be changed whereas `state` contains private information for the component to initialise, change, and use on it’s own. +Here are some good resources for further reading on when to use `props` vs `state`: +* [Props vs State](https://github.com/uberVU/react-guide/blob/master/props-vs-state.md) +* [ReactJS: Props vs. State](http://lucybain.com/blog/2016/react-state-vs-pros/) ### Why is `setState` is giving me the wrong value?