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: versioned_docs/version-7.x/use-focus-effect.md
+87-12Lines changed: 87 additions & 12 deletions
Original file line number
Diff line number
Diff line change
@@ -4,30 +4,105 @@ title: useFocusEffect
4
4
sidebar_label: useFocusEffect
5
5
---
6
6
7
+
import Tabs from '@theme/Tabs';
8
+
import TabItem from '@theme/TabItem';
9
+
7
10
Sometimes we want to run side-effects when a screen is focused. A side effect may involve things like adding an event listener, fetching data, updating document title, etc. While this can be achieved using `focus` and `blur` events, it's not very ergonomic.
8
11
9
12
To make this easier, the library exports a `useFocusEffect` hook:
To avoid the running the effect too often, it's important to wrap the callback in `useCallback` before passing it to `useFocusEffect` as shown in the example.
@@ -107,7 +182,7 @@ useFocusEffect(
107
182
React.useCallback(() => {
108
183
return () => {
109
184
// Do something that should run on blur
110
-
}
185
+
};
111
186
}, [])
112
187
);
113
188
```
@@ -116,7 +191,7 @@ The cleanup function runs whenever the effect needs to cleanup, i.e. on `blur`,
Copy file name to clipboardExpand all lines: versioned_docs/version-7.x/use-is-focused.md
+82-6Lines changed: 82 additions & 6 deletions
Original file line number
Diff line number
Diff line change
@@ -4,22 +4,98 @@ title: useIsFocused
4
4
sidebar_label: useIsFocused
5
5
---
6
6
7
+
import Tabs from '@theme/Tabs';
8
+
import TabItem from '@theme/TabItem';
9
+
7
10
We might want to render different content based on the current focus state of the screen. The library exports a `useIsFocused` hook to make this easier:
Note that using this hook triggers a re-render for the component when the screen it's in changes focus. This might cause lags during the animation if your component is heavy. You might want to extract the expensive parts to separate components and use [`React.memo`](https://reactjs.org/docs/react-api.html#reactmemo) or [`React.PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) to minimize re-renders for them.
24
100
25
101
## Using with class component
@@ -35,7 +111,7 @@ class Profile extends React.Component {
0 commit comments