From a409b4df324abd5cd297bbddcf78cf234bec1806 Mon Sep 17 00:00:00 2001 From: Shubheksha Jalan Date: Fri, 18 Nov 2016 22:14:27 +0530 Subject: [PATCH] Improved sections of state and lifecycle docs --- docs/state-and-lifecycle.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/docs/state-and-lifecycle.md b/docs/state-and-lifecycle.md index ab585aff0..8a6c90c57 100644 --- a/docs/state-and-lifecycle.md +++ b/docs/state-and-lifecycle.md @@ -309,6 +309,18 @@ ReactDOM.render( Now the clock ticks every second. +Let's quickly recap what's going on and the order in which the methods are called: + +1) When the `Clock` component is passed to `ReactDOM.render()`, it calls the constructor of the Clock class and initializes the state. + +2) Then the component's render method is called and the output is rendered to DOM. + +3) After that the `componentDidMount()` method runs which sets up the interval at which the `tick()` method is called. + +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. + +5) Finally, when this cycle stops, `componentWillUnmount()` method is called and the memory for that component is freed. + ## Using State Correctly There are three things you should know about `setState()`. @@ -329,6 +341,8 @@ Instead, use `setState()`: this.setState({comment: 'Hello'}); ``` +The only place where you can assign `this.state()` is the constructor. + ### State Updates May Be Asynchronous React may batch multiple `setState()` calls into a single update for performance.