antipatterns

petehunt committed Jul 13, 2013 at 19:30 UTC 13ad0c500b0b4d28843c9b39d939b4b891513514

2 files changed +9 -1

docs/docs/refactor/00-table-of-contents.md

+2 -1

@@ -25,8 +25,9 @@ Interactivity and dynamic UIs

25 - Under the hood: autoBind and event delegation (IE8 notes)

26 - React is a state machine

27 - How state works

28 -- What should go in state?

28 - What components should have state?

29 +- What should go in state?

30 +- What shouldn't go in state?

32 Scaling up: using multiple components

33 - Motivation: separate concerns

docs/docs/refactor/03-interactivity-and-dynamic-uis.md

@@ -65,3 +65,10 @@ A common pattern is to create several stateless components that just render data

65 ## What should go in state?

67 **`this.state` should contain any data that the component's event handlers will change that should 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.

68 +

69 +## What *shouldn't* go in state?

70 +

71 +**`this.state`** should contain the minimal amount of data needed to represent your UI's state. As such, it should not contain:

72 +* **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()`

73 +* **React component nodes.** Build them in `render()` based on underlying props and state.

74 +* **Duplicated data from props.** Try to use props as the source of truth where possible. Because props can change over time, it's appropriate to store props in state to be able to know its previous values.

\ No newline at end of file