You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: content/docs/reference-react-component.md
+8-8Lines changed: 8 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -39,7 +39,7 @@ The only method you *must* define in a `React.Component` subclass is called [`re
39
39
40
40
### The Component Lifecycle {#the-component-lifecycle}
41
41
42
-
Each component has several "lifecycle methods" that you can override to run code at particular times in the process. **You can use [this lifecycle diagram](http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/) as a cheat sheet.** In the list below, commonly used lifecycle methods are marked as **bold**. The rest of them exist for relatively rare use cases.
42
+
Each component has several "lifecycle methods" that you can override to run code at particular times in the process. **You can use [this lifecycle diagram](https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/) as a cheat sheet.** In the list below, commonly used lifecycle methods are marked as **bold**. The rest of them exist for relatively rare use cases.
43
43
44
44
#### Mounting {#mounting}
45
45
@@ -109,7 +109,7 @@ Each component also provides some other APIs:
109
109
110
110
### Commonly Used Lifecycle Methods {#commonly-used-lifecycle-methods}
111
111
112
-
The methods in this section cover the vast majority of use cases you'll encounter creating React components. **For a visual reference, check out [this lifecycle diagram](http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/).**
112
+
The methods in this section cover the vast majority of use cases you'll encounter creating React components. **For a visual reference, check out [this lifecycle diagram](https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/).**
113
113
114
114
### `render()` {#render}
115
115
@@ -245,7 +245,7 @@ You **should not call `setState()`** in `componentWillUnmount()` because the com
245
245
246
246
### Rarely Used Lifecycle Methods {#rarely-used-lifecycle-methods}
247
247
248
-
The methods in this section correspond to uncommon use cases. They're handy once in a while, but most of your components probably don't need any of them. **You can see most of the methods below on [this lifecycle diagram](http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/) if you click the "Show less common lifecycles" checkbox at the top of it.**
248
+
The methods in this section correspond to uncommon use cases. They're handy once in a while, but most of your components probably don't need any of them. **You can see most of the methods below on [this lifecycle diagram](https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/) if you click the "Show less common lifecycles" checkbox at the top of it.**
This method exists for [rare use cases](/blog/2018/06/07/you-probably-dont-need-derived-state.html#when-to-use-derived-state) where the state depends on changes in props over time. For example, it might be handy for implementing a `<Transition>` component that compares its previous and next children to decide which of them to animate in and out.
280
280
281
-
Deriving state leads to verbose code and makes your components difficult to think about.
281
+
Deriving state leads to verbose code and makes your components difficult to think about.
282
282
[Make sure you're familiar with simpler alternatives:](/blog/2018/06/07/you-probably-dont-need-derived-state.html)
283
283
284
284
* If you need to **perform a side effect** (for example, data fetching or an animation) in response to a change in props, use [`componentDidUpdate`](#componentdidupdate) lifecycle instead.
@@ -324,7 +324,7 @@ Only use error boundaries for recovering from unexpected exceptions; **don't try
324
324
For more details, see [*Error Handling in React 16*](/blog/2017/07/26/error-handling-in-react-16.html).
325
325
326
326
> Note
327
-
>
327
+
>
328
328
> Error boundaries only catch errors in the components **below** them in the tree. An error boundary can’t catch an error within itself.
@@ -353,7 +353,7 @@ class ErrorBoundary extends React.Component {
353
353
return <h1>Something went wrong.</h1>;
354
354
}
355
355
356
-
return this.props.children;
356
+
return this.props.children;
357
357
}
358
358
}
359
359
```
@@ -408,13 +408,13 @@ class ErrorBoundary extends React.Component {
408
408
return <h1>Something went wrong.</h1>;
409
409
}
410
410
411
-
return this.props.children;
411
+
return this.props.children;
412
412
}
413
413
}
414
414
```
415
415
416
416
> Note
417
-
>
417
+
>
418
418
> In the event of an error, you can render a fallback UI with `componentDidCatch()` by calling `setState`, but this will be deprecated in a future release.
419
419
> Use `static getDerivedStateFromError()` to handle fallback rendering instead.
0 commit comments