Skip to content

Commit 4f643e2

Browse files
Correct description of getSnapshotBeforeUpdate (#719)
* Update components.md * docs: Copy note to v11 --------- Co-authored-by: Ryan Christian <[email protected]>
1 parent 5238721 commit 4f643e2

File tree

2 files changed

+22
-22
lines changed

2 files changed

+22
-22
lines changed

content/en/guide/v10/components.md

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -81,17 +81,17 @@ render(<Clock />, document.getElementById('app'));
8181

8282
In order to have the clock's time update every second, we need to know when `<Clock>` gets mounted to the DOM. _If you've used HTML5 Custom Elements, this is similar to the `attachedCallback` and `detachedCallback` lifecycle methods._ Preact invokes the following lifecycle methods if they are defined for a Component:
8383

84-
| Lifecycle method | When it gets called |
85-
| ---------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
86-
| `componentWillMount()` | (deprecated) before the component gets mounted to the DOM |
87-
| `componentDidMount()` | after the component gets mounted to the DOM |
88-
| `componentWillUnmount()` | prior to removal from the DOM |
89-
| `componentWillReceiveProps(nextProps, nextContext)` | before new props get accepted _(deprecated)_ |
90-
| `getDerivedStateFromProps(nextProps, prevState)` | just before `shouldComponentUpdate`. Return object to update state or `null` to skip update. Use with care. |
91-
| `shouldComponentUpdate(nextProps, nextState, nextContext)` | before `render()`. Return `false` to skip render |
92-
| `componentWillUpdate(nextProps, nextState, nextContext)` | before `render()` _(deprecated)_ |
93-
| `getSnapshotBeforeUpdate(prevProps, prevState)` | called just before `render()`. return value is passed to `componentDidUpdate`. |
94-
| `componentDidUpdate(prevProps, prevState, snapshot)` | after `render()` |
84+
| Lifecycle method | When it gets called |
85+
| ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
86+
| `componentWillMount()` | (deprecated) before the component gets mounted to the DOM |
87+
| `componentDidMount()` | after the component gets mounted to the DOM |
88+
| `componentWillUnmount()` | prior to removal from the DOM |
89+
| `componentWillReceiveProps(nextProps, nextContext)` | before new props get accepted _(deprecated)_ |
90+
| `getDerivedStateFromProps(nextProps, prevState)` | just before `shouldComponentUpdate`. Return object to update state or `null` to skip update. Use with care. |
91+
| `shouldComponentUpdate(nextProps, nextState, nextContext)` | before `render()`. Return `false` to skip render |
92+
| `componentWillUpdate(nextProps, nextState, nextContext)` | before `render()` _(deprecated)_ |
93+
| `getSnapshotBeforeUpdate(prevProps, prevState)` | called just after `render()`, but before changes are flushed to the DOM. Return value is passed to `componentDidUpdate`. |
94+
| `componentDidUpdate(prevProps, prevState, snapshot)` | after `render()` |
9595

9696
Here's a visual overview of how they relate to each other (originally posted in [a tweet](https://web.archive.org/web/20191118010106/https://twitter.com/dan_abramov/status/981712092611989509) by Dan Abramov):
9797

content/en/guide/v11/components.md

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -81,17 +81,17 @@ render(<Clock />, document.getElementById('app'));
8181

8282
In order to have the clock's time update every second, we need to know when `<Clock>` gets mounted to the DOM. _If you've used HTML5 Custom Elements, this is similar to the `attachedCallback` and `detachedCallback` lifecycle methods._ Preact invokes the following lifecycle methods if they are defined for a Component:
8383

84-
| Lifecycle method | When it gets called |
85-
| ---------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
86-
| `componentWillMount()` | (deprecated) before the component gets mounted to the DOM |
87-
| `componentDidMount()` | after the component gets mounted to the DOM |
88-
| `componentWillUnmount()` | prior to removal from the DOM |
89-
| `componentWillReceiveProps(nextProps, nextContext)` | before new props get accepted _(deprecated)_ |
90-
| `getDerivedStateFromProps(nextProps, prevState)` | just before `shouldComponentUpdate`. Return object to update state or `null` to skip update. Use with care. |
91-
| `shouldComponentUpdate(nextProps, nextState, nextContext)` | before `render()`. Return `false` to skip render |
92-
| `componentWillUpdate(nextProps, nextState, nextContext)` | before `render()` _(deprecated)_ |
93-
| `getSnapshotBeforeUpdate(prevProps, prevState)` | called just before `render()`. return value is passed to `componentDidUpdate`. |
94-
| `componentDidUpdate(prevProps, prevState, snapshot)` | after `render()` |
84+
| Lifecycle method | When it gets called |
85+
| ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
86+
| `componentWillMount()` | (deprecated) before the component gets mounted to the DOM |
87+
| `componentDidMount()` | after the component gets mounted to the DOM |
88+
| `componentWillUnmount()` | prior to removal from the DOM |
89+
| `componentWillReceiveProps(nextProps, nextContext)` | before new props get accepted _(deprecated)_ |
90+
| `getDerivedStateFromProps(nextProps, prevState)` | just before `shouldComponentUpdate`. Return object to update state or `null` to skip update. Use with care. |
91+
| `shouldComponentUpdate(nextProps, nextState, nextContext)` | before `render()`. Return `false` to skip render |
92+
| `componentWillUpdate(nextProps, nextState, nextContext)` | before `render()` _(deprecated)_ |
93+
| `getSnapshotBeforeUpdate(prevProps, prevState)` | called just after `render()`, but before changes are flushed to the DOM. Return value is passed to `componentDidUpdate`. |
94+
| `componentDidUpdate(prevProps, prevState, snapshot)` | after `render()` |
9595

9696
Here's a visual overview of how they relate to each other (originally posted in [a tweet](https://web.archive.org/web/20191118010106/https://twitter.com/dan_abramov/status/981712092611989509) by Dan Abramov):
9797

0 commit comments

Comments
 (0)