Improved sections of state and lifecycle docs
Shubheksha Jalan committed
Nov 18, 2016 at 22:14 UTC
730dae1df68a08377f37cf3bb44f2ee1fea9fa69
1 file changed
+14
docs/docs/state-and-lifecycle.md
+14
@@ -309,6 +309,18 @@ ReactDOM.render(
309
310
Now the clock ticks every second.
311
312
+Let's quickly recap what's going on and the order in which the methods are called:
313
+
314
+1) When the `Clock` component is passed to `ReactDOM.render()`, it calls the constructor of the Clock class and initializes the state.
315
+
316
+2) Then the component's render method is called and the output is rendered to DOM.
317
+
318
+3) After that the `componentDidMount()` method runs which sets up the interval at which the `tick()` method is called.
319
+
320
+4) The `tick()` method being called every second is responsible for changing the state which in turn triggers the `render()` method to update the component.
321
+
322
+5) Finally, when this cycle stops, `componentWillUnmount()` method is called and the memory for that component is freed.
323
+
324
## Using State Correctly
325
326
There are three things you should know about `setState()`.
@@ -329,6 +341,8 @@ Instead, use `setState()`:
341
this.setState({comment: 'Hello'});
342
```
343
344
+The only place where you can assign `this.state()` is the constructor.
345
+
346
### State Updates May Be Asynchronous
347
348
React may batch multiple `setState()` calls into a single update for performance.