Skip to content

Commit 1ac14ce

Browse files
committed
Improve lifecycle docs
1 parent cfb683e commit 1ac14ce

File tree

2 files changed

+13
-3
lines changed

2 files changed

+13
-3
lines changed

versioned_docs/version-7.x/navigation-events.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,12 @@ For most cases, the [`useFocusEffect`](use-focus-effect.md) hook might be approp
2525

2626
This event is emitted when the screen goes out of focus.
2727

28+
:::note
29+
30+
In some cases, such as going back from a screen in [native-stack navigator](native-stack-navigator.md), the screen may not receive the `blur` event as the screen is unmounted immediately. For cleaning up resources, it's recommended to use the cleanup function of [`useFocusEffect`](use-focus-effect.md) hook instead that considers both blur and unmounting of the screen.
31+
32+
:::
33+
2834
### `state`
2935

3036
This event is emitted when the navigator's state changes. This event receives the navigator's state in the event data (`event.data.state`).

versioned_docs/version-7.x/navigation-lifecycle.md

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -474,7 +474,7 @@ export default function App() {
474474

475475
See [Navigation events](navigation-events.md) for more details on the available events and the API usage.
476476

477-
Instead of adding event listeners manually, we can use the [`useFocusEffect`](use-focus-effect.md) hook to perform side effects. It's like React's `useEffect` hook, but it ties into the navigation lifecycle.
477+
For performing side effects, we can use the [`useFocusEffect`](use-focus-effect.md) hook instead of subscribing to events. It's like React's `useEffect` hook, but it ties into the navigation lifecycle.
478478

479479
Example:
480480

@@ -622,7 +622,11 @@ export default function App() {
622622

623623
If you want to render different things based on if the screen is focused or not, you can use the [`useIsFocused`](use-is-focused.md) hook which returns a boolean indicating whether the screen is focused.
624624

625+
If you want to know if the screen is focused or not inside of an event listener, you can use the [`navigation.isFocused()`](navigation-object.md#isfocused) method. Note that using this method doesn't trigger a re-render like the `useIsFocused` hook does, so it is not suitable for rendering different things based on focus state.
626+
625627
## Summary
626628

627-
- While React's lifecycle methods are still valid, React Navigation adds more events that you can subscribe to through the `navigation` object.
628-
- You may also use the `useFocusEffect` or `useIsFocused` hooks.
629+
- React Navigation does not unmount screens when navigating away from them
630+
- The `useFocusEffect` hook is analogous to React's `useEffect` but is tied to the navigation lifecycle instead of the component lifecycle.
631+
- The `useIsFocused` hook and `navigation.isFocused` method can be used to determine if a screen is currently focused.
632+
- React Navigation emits `focus` and `blur` events that can be listened to when a screen comes into focus or goes out of focus.

0 commit comments

Comments
 (0)