From a409b4df324abd5cd297bbddcf78cf234bec1806 Mon Sep 17 00:00:00 2001 From: Shubheksha Jalan Date: Fri, 18 Nov 2016 22:14:27 +0530 Subject: [PATCH 1/2] 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 ab585aff..8a6c90c5 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. From 9c9ecee640796c58727994c7144e9ef1ac0fe429 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Fri, 18 Nov 2016 18:24:15 +0000 Subject: [PATCH 2/2] Minor changes, make it more verbose --- docs/state-and-lifecycle.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/state-and-lifecycle.md b/docs/state-and-lifecycle.md index 8a6c90c5..5aa95e93 100644 --- a/docs/state-and-lifecycle.md +++ b/docs/state-and-lifecycle.md @@ -311,15 +311,15 @@ 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. +1) When `` is passed to `ReactDOM.render()`, React calls the constructor of the `Clock` component. Since `Clock` needs to display the current time, it initializes `this.state` with an object including the current time. We will later update this state. -2) Then the component's render method is called and the output is rendered to DOM. +2) React then calls the `Clock` component's `render()` method. This is how React learns what should be displayed on the screen. React then updates the DOM to match the `Clock`'s render output. -3) After that the `componentDidMount()` method runs which sets up the interval at which the `tick()` method is called. +3) When the `Clock` output is inserted in the DOM, React calls the `componentDidMount()` lifecycle hook. Inside it, the `Clock` component asks the browser to set up a timer to call `tick()` once a second. -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. +4) Every second the browser calls the `tick()` method. Inside it, the `Clock` component schedules a UI update by calling `setState()` with an object containing the current time. Thanks to the `setState()` call, React knows the state has changed, and calls `render()` method again to learn what should be on the screen. This time, `this.state.date` in the `render()` method will be different, and so the render output will include the updated time. React updates the DOM accordingly. -5) Finally, when this cycle stops, `componentWillUnmount()` method is called and the memory for that component is freed. +5) If the `Clock` component is ever removed from the DOM, React calls the `componentWillUnmount()` lifecycle hook so the timer is stopped. ## Using State Correctly @@ -341,7 +341,7 @@ Instead, use `setState()`: this.setState({comment: 'Hello'}); ``` -The only place where you can assign `this.state()` is the constructor. +The only place where you can assign `this.state` is the constructor. ### State Updates May Be Asynchronous