Browse Source

Added FAQ for Synching State and props

main
Yash Joshi 7 years ago
committed by GitHub
parent
commit
a084d924fa
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 12
      content/docs/faq-state.md

12
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.

Loading…
Cancel
Save