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.
Cole Turner committed
Oct 2, 2017 at 09:37 UTC
bd915caaf7b5ec2b34d433f118fa1ef138f6be6a
1 file changed
+2
-2
docs/docs/state-and-lifecycle.md
+2
-2
@@ -261,7 +261,7 @@ We will tear down the timer in the `componentWillUnmount()` lifecycle hook:
261
}
262
```
263
264
-Finally, we will implement the `tick()` method that runs every second.
264
+Finally, we will implement a method called `tick()` that the `Clock` component will run every second.
265
266
It will use `this.setState()` to schedule updates to the component local state:
267
@@ -315,7 +315,7 @@ Let's quickly recap what's going on and the order in which the methods are calle
315
316
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.
317
318
-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.
318
+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.
319
320
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.
321