From d9415384b294788be9c26f7a18d3335c200f0515 Mon Sep 17 00:00:00 2001 From: Cole Turner Date: Mon, 2 Oct 2017 09:37:05 -0700 Subject: [PATCH] Clarify implementation of tick() in Lifecycle docs (#11002) This documentation change clarifies how the method `tick()` relates to the example given in the State and Lifecycle documentation. Why this change is necessary is because it may be confusing for beginners who may mistake `tick()` to be a lifecycle API hook. To clarify, the verbiage is changed so that it becomes more clear that the method is specific to the component and not the API. --- docs/state-and-lifecycle.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/state-and-lifecycle.md b/docs/state-and-lifecycle.md index af95b33e..3074727c 100644 --- a/docs/state-and-lifecycle.md +++ b/docs/state-and-lifecycle.md @@ -261,7 +261,7 @@ We will tear down the timer in the `componentWillUnmount()` lifecycle hook: } ``` -Finally, we will implement the `tick()` method that runs every second. +Finally, we will implement a method called `tick()` that the `Clock` component will run every second. It will use `this.setState()` to schedule updates to the component local state: @@ -315,7 +315,7 @@ Let's quickly recap what's going on and the order in which the methods are calle 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) 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. +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 the component's `tick()` method once a second. 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.