diff --git a/versioned_docs/version-6.x/bottom-tab-navigator.md b/versioned_docs/version-6.x/bottom-tab-navigator.md index 17d190ee37..65c3d3cb9b 100755 --- a/versioned_docs/version-6.x/bottom-tab-navigator.md +++ b/versioned_docs/version-6.x/bottom-tab-navigator.md @@ -273,7 +273,7 @@ To show your screen under the tab bar, you can set the `position` style to absol You also might need to add a bottom margin to your content if you have a absolutely positioned tab bar. React Navigation won't do it automatically. -To get the height of the bottom tab bar, you can use `BottomTabBarHeightContext` with [React's Context API](https://reactjs.org/docs/context.html#contextconsumer) or `useBottomTabBarHeight`: +To get the height of the bottom tab bar, you can use `BottomTabBarHeightContext` with [React's Context API](https://react.dev/reference/react/useContext) or `useBottomTabBarHeight`: ```js import { BottomTabBarHeightContext } from '@react-navigation/bottom-tabs'; diff --git a/versioned_docs/version-6.x/configuring-links.md b/versioned_docs/version-6.x/configuring-links.md index 7f4d4470af..a0e24f2f50 100644 --- a/versioned_docs/version-6.x/configuring-links.md +++ b/versioned_docs/version-6.x/configuring-links.md @@ -509,7 +509,7 @@ Another thing to keep in mind is that it's not possible to pass params to the in In this case, any params in the URL are only passed to the `Profile` screen which matches the path pattern `users/:id`, and the `Feed` screen doesn't receive any params. If you want to have the same params in the `Feed` screen, you can specify a [custom `getStateFromPath` function](navigation-container.md#linkinggetstatefrompath) and copy those params. -Similarly, if you want to access params of a parent screen from a child screen, you can use [React Context](https://reactjs.org/docs/context.html) to expose them. +Similarly, if you want to access params of a parent screen from a child screen, you can use [React Context](https://react.dev/reference/react/useContext) to expose them. ## Matching exact paths diff --git a/versioned_docs/version-6.x/elements.md b/versioned_docs/version-6.x/elements.md index 84304a7c8c..6c099ad11f 100644 --- a/versioned_docs/version-6.x/elements.md +++ b/versioned_docs/version-6.x/elements.md @@ -164,7 +164,7 @@ This is useful if you want to render a semi-transparent header or a blurred back Note that if you don't want your content to appear under the header, you need to manually add a top margin to your content. React Navigation won't do it automatically. -To get the height of the header, you can use [`HeaderHeightContext`](#headerheightcontext) with [React's Context API](https://reactjs.org/docs/context.html#contextconsumer) or [`useHeaderHeight`](#useheaderheight). +To get the height of the header, you can use [`HeaderHeightContext`](#headerheightcontext) with [React's Context API](https://react.dev/reference/react/useContext) or [`useHeaderHeight`](#useheaderheight). #### `headerBackground` diff --git a/versioned_docs/version-6.x/function-after-focusing-screen.md b/versioned_docs/version-6.x/function-after-focusing-screen.md index bb7ba6ad22..e1a6ed08e1 100755 --- a/versioned_docs/version-6.x/function-after-focusing-screen.md +++ b/versioned_docs/version-6.x/function-after-focusing-screen.md @@ -47,7 +47,7 @@ In most cases, it's recommended to use the `useFocusEffect` hook instead of addi ## Triggering an action with the `useFocusEffect` hook -React Navigation provides a [hook](https://reactjs.org/docs/hooks-intro.html) that runs an effect when the screen comes into focus and cleans it up when it goes out of focus. This is useful for cases such as adding event listeners, for fetching data with an API call when a screen becomes focused, or any other action that needs to happen once the screen comes into view. +React Navigation provides a [hook](use-focus-effect.md) that runs an effect when the screen comes into focus and cleans it up when it goes out of focus. This is useful for cases such as adding event listeners, for fetching data with an API call when a screen becomes focused, or any other action that needs to happen once the screen comes into view. This is particularly handy when we are trying to stop something when the page is unfocused, like stopping a video or audio file from playing, or stopping the tracking of a user's location. @@ -75,7 +75,7 @@ See the [`useFocusEffect`](https://reactnavigation.org/docs/use-focus-effect/) d ## Re-rendering screen with the `useIsFocused` hook -React Navigation provides a [hook](https://reactjs.org/docs/hooks-intro.html) that returns a boolean indicating whether the screen is focused or not. +React Navigation provides a [hook](use-is-focused.md) that returns a boolean indicating whether the screen is focused or not. The hook will return `true` when the screen is focused and `false` when our component is no longer focused. This enables us to render something conditionally based on whether the user is on the screen or not. diff --git a/versioned_docs/version-6.x/getting-started.md b/versioned_docs/version-6.x/getting-started.md index 41d966a9ac..efd49384dd 100755 --- a/versioned_docs/version-6.x/getting-started.md +++ b/versioned_docs/version-6.x/getting-started.md @@ -12,7 +12,7 @@ If you're already familiar with JavaScript, React and React Native, then you'll Here are some resources to help you out: -1. [React Native Express](https://www.reactnative.express) (Sections 1 to 4) +1. [React Native](https://reactnative.dev/docs/getting-started) 2. [Main Concepts of React](https://react.dev/learn) 3. [React Hooks](https://react.dev/reference/react) 4. [React Context](https://react.dev/learn/passing-data-deeply-with-context) (Advanced) diff --git a/versioned_docs/version-6.x/hello-react-navigation.md b/versioned_docs/version-6.x/hello-react-navigation.md index 946ea1737f..daa7867341 100755 --- a/versioned_docs/version-6.x/hello-react-navigation.md +++ b/versioned_docs/version-6.x/hello-react-navigation.md @@ -130,7 +130,7 @@ Sometimes we will want to specify the same options for all of the screens in the Sometimes we might want to pass additional props to a screen. We can do that with 2 approaches: -1. Use [React context](https://reactjs.org/docs/context.html) and wrap the navigator with a context provider to pass data to the screens (recommended). +1. Use [React context](https://react.dev/reference/react/useContext) and wrap the navigator with a context provider to pass data to the screens (recommended). 2. Use a render callback for the screen instead of specifying a `component` prop: ```js @@ -141,7 +141,7 @@ Sometimes we might want to pass additional props to a screen. We can do that wit :::warning -By default, React Navigation applies optimizations to screen components to prevent unnecessary renders. Using a render callback removes those optimizations. So if you use a render callback, you'll need to ensure that you use [`React.memo`](https://reactjs.org/docs/react-api.html#reactmemo) or [`React.PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) for your screen components to avoid performance issues. +By default, React Navigation applies optimizations to screen components to prevent unnecessary renders. Using a render callback removes those optimizations. So if you use a render callback, you'll need to ensure that you use [`React.memo`](https://react.dev/reference/react/memo) or [`React.PureComponent`](https://react.dev/reference/react/PureComponent) for your screen components to avoid performance issues. ::: diff --git a/versioned_docs/version-6.x/native-stack-navigator.md b/versioned_docs/version-6.x/native-stack-navigator.md index 67f096165a..015eae1f08 100755 --- a/versioned_docs/version-6.x/native-stack-navigator.md +++ b/versioned_docs/version-6.x/native-stack-navigator.md @@ -166,7 +166,7 @@ This is useful if you want to render a semi-transparent header or a blurred back Note that if you don't want your content to appear under the header, you need to manually add a top margin to your content. React Navigation won't do it automatically. -To get the height of the header, you can use [`HeaderHeightContext`](elements.md#headerheightcontext) with [React's Context API](https://reactjs.org/docs/context.html#contextconsumer) or [`useHeaderHeight`](elements.md#useheaderheight). +To get the height of the header, you can use [`HeaderHeightContext`](elements.md#headerheightcontext) with [React's Context API](https://react.dev/reference/react/useContext) or [`useHeaderHeight`](elements.md#useheaderheight). #### `headerBlurEffect` diff --git a/versioned_docs/version-6.x/navigation-container.md b/versioned_docs/version-6.x/navigation-container.md index b066294555..f5708d8a60 100644 --- a/versioned_docs/version-6.x/navigation-container.md +++ b/versioned_docs/version-6.x/navigation-container.md @@ -31,7 +31,7 @@ export default function App() { ## Ref -It's also possible to attach a [`ref`](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs) to the container to get access to various helper methods, for example, dispatch navigation actions. This should be used in rare cases when you don't have access to the `navigation` prop, such as a Redux middleware. +It's also possible to attach a [`ref`](https://react.dev/learn/referencing-values-with-refs) to the container to get access to various helper methods, for example, dispatch navigation actions. This should be used in rare cases when you don't have access to the `navigation` prop, such as a Redux middleware. Example: diff --git a/versioned_docs/version-6.x/nesting-navigators.md b/versioned_docs/version-6.x/nesting-navigators.md index d5849d3eba..d490c434b2 100755 --- a/versioned_docs/version-6.x/nesting-navigators.md +++ b/versioned_docs/version-6.x/nesting-navigators.md @@ -64,7 +64,7 @@ If you want to achieve this behavior, see the guide for [screen options with nes For example, any `params` passed to a screen in a nested navigator are in the `route` prop of that screen and aren't accessible from a screen in a parent or child navigator. -If you need to access params of the parent screen from a child screen, you can use [React Context](https://reactjs.org/docs/context.html) to expose params to children. +If you need to access params of the parent screen from a child screen, you can use [React Context](https://react.dev/reference/react/useContext) to expose params to children. ### Navigation actions are handled by current navigator and bubble up if couldn't be handled diff --git a/versioned_docs/version-6.x/screen.md b/versioned_docs/version-6.x/screen.md index a97eb9f7de..5385e9d44a 100644 --- a/versioned_docs/version-6.x/screen.md +++ b/versioned_docs/version-6.x/screen.md @@ -170,11 +170,11 @@ Render callback to return React Element to use for the screen: ``` -You can use this approach instead of the `component` prop if you need to pass additional props. Though we recommend using [React context](https://reactjs.org/docs/context.html) for passing data instead. +You can use this approach instead of the `component` prop if you need to pass additional props. Though we recommend using [React context](https://react.dev/reference/react/useContext) for passing data instead. :::warning -By default, React Navigation applies optimizations to screen components to prevent unnecessary renders. Using a render callback removes those optimizations. So if you use a render callback, you'll need to ensure that you use [`React.memo`](https://reactjs.org/docs/react-api.html#reactmemo) or [`React.PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) for your screen components to avoid performance issues. +By default, React Navigation applies optimizations to screen components to prevent unnecessary renders. Using a render callback removes those optimizations. So if you use a render callback, you'll need to ensure that you use [`React.memo`](https://react.dev/reference/react/memo) or [`React.PureComponent`](https://react.dev/reference/react/PureComponent) for your screen components to avoid performance issues. ::: diff --git a/versioned_docs/version-6.x/tab-based-navigation.md b/versioned_docs/version-6.x/tab-based-navigation.md index 08e7eef457..173d60dc0f 100755 --- a/versioned_docs/version-6.x/tab-based-navigation.md +++ b/versioned_docs/version-6.x/tab-based-navigation.md @@ -116,7 +116,7 @@ Sometimes we want to add badges to some icons. You can use the [`tabBarBadge` op ``` -From UI perspective this component is ready to use, but you still need to find some way to pass down the badge count properly from somewhere else, like using [React Context](https://reactjs.org/docs/context.html), [Redux](https://redux.js.org/), [MobX](https://mobx.js.org/) or [event emitters](https://github.com/facebook/react-native/blob/master/Libraries/vendor/emitter/EventEmitter.js). +From UI perspective this component is ready to use, but you still need to find some way to pass down the badge count properly from somewhere else, like using [React Context](https://react.dev/reference/react/useContext), [Redux](https://redux.js.org/), [MobX](https://mobx.js.org/) or [event emitters](https://github.com/facebook/react-native/blob/master/Libraries/vendor/emitter/EventEmitter.js). ![Tabs with badges](/assets/navigators/tabs/tabs-badges.png) diff --git a/versioned_docs/version-6.x/use-is-focused.md b/versioned_docs/version-6.x/use-is-focused.md index dbe2b1b291..c99f756146 100755 --- a/versioned_docs/version-6.x/use-is-focused.md +++ b/versioned_docs/version-6.x/use-is-focused.md @@ -20,7 +20,7 @@ function Profile() { } ``` -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. +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://react.dev/reference/react/memo) or [`React.PureComponent`](https://react.dev/reference/react/PureComponent) to minimize re-renders for them. ## Using with class component diff --git a/versioned_docs/version-7.x/configuring-links.md b/versioned_docs/version-7.x/configuring-links.md index a387d79be5..592c5aa529 100644 --- a/versioned_docs/version-7.x/configuring-links.md +++ b/versioned_docs/version-7.x/configuring-links.md @@ -910,7 +910,7 @@ Another thing to keep in mind is that it's not possible to pass params to the in In this case, any params in the URL are only passed to the `Profile` screen which matches the path pattern `users/:id`, and the `Feed` screen doesn't receive any params. If you want to have the same params in the `Feed` screen, you can specify a [custom `getStateFromPath` function](navigation-container.md#linkinggetstatefrompath) and copy those params. -Similarly, if you want to access params of a parent screen from a child screen, you can use [React Context](https://reactjs.org/docs/context.html) to expose them. +Similarly, if you want to access params of a parent screen from a child screen, you can use [React Context](https://react.dev/reference/react/useContext) to expose them. ## Matching exact paths diff --git a/versioned_docs/version-7.x/customizing-bottom-tabs.md b/versioned_docs/version-7.x/customizing-bottom-tabs.md index cec095eb1a..4f17f068c5 100755 --- a/versioned_docs/version-7.x/customizing-bottom-tabs.md +++ b/versioned_docs/version-7.x/customizing-bottom-tabs.md @@ -273,7 +273,7 @@ export default function App() { -From UI perspective this component is ready to use, but you still need to find some way to pass down the badge count properly from somewhere else, like using [React Context](https://reactjs.org/docs/context.html), [Redux](https://redux.js.org/), [MobX](https://mobx.js.org/) or [event emitters](https://github.com/facebook/react-native/blob/master/Libraries/vendor/emitter/EventEmitter.js). +From UI perspective this component is ready to use, but you still need to find some way to pass down the badge count properly from somewhere else, like using [React Context](https://react.dev/reference/react/useContext), [Redux](https://redux.js.org/), [MobX](https://mobx.js.org/) or [event emitters](https://github.com/facebook/react-native/blob/master/Libraries/vendor/emitter/EventEmitter.js). You can also update the badge from within the screen component by using the `setOptions` method: diff --git a/versioned_docs/version-7.x/elements.md b/versioned_docs/version-7.x/elements.md index 851744c1bf..746bc3551c 100644 --- a/versioned_docs/version-7.x/elements.md +++ b/versioned_docs/version-7.x/elements.md @@ -425,7 +425,7 @@ This is useful if you want to render a semi-transparent header or a blurred back Note that if you don't want your content to appear under the header, you need to manually add a top margin to your content. React Navigation won't do it automatically. -To get the height of the header, you can use [`HeaderHeightContext`](#headerheightcontext) with [React's Context API](https://reactjs.org/docs/context.html#contextconsumer) or [`useHeaderHeight`](#useheaderheight). +To get the height of the header, you can use [`HeaderHeightContext`](#headerheightcontext) with [React's Context API](https://react.dev/reference/react/useContext#contextconsumer) or [`useHeaderHeight`](#useheaderheight). #### `headerBackground` diff --git a/versioned_docs/version-7.x/function-after-focusing-screen.md b/versioned_docs/version-7.x/function-after-focusing-screen.md index 24da95e0a0..26528f8eeb 100755 --- a/versioned_docs/version-7.x/function-after-focusing-screen.md +++ b/versioned_docs/version-7.x/function-after-focusing-screen.md @@ -133,7 +133,7 @@ In most cases, it's recommended to use the `useFocusEffect` hook instead of addi ## Triggering an action with the `useFocusEffect` hook -React Navigation provides a [hook](https://reactjs.org/docs/hooks-intro.html) that runs an effect when the screen comes into focus and cleans it up when it goes out of focus. This is useful for cases such as adding event listeners, for fetching data with an API call when a screen becomes focused, or any other action that needs to happen once the screen comes into view. +React Navigation provides a [hook](use-focus-effect.md) that runs an effect when the screen comes into focus and cleans it up when it goes out of focus. This is useful for cases such as adding event listeners, for fetching data with an API call when a screen becomes focused, or any other action that needs to happen once the screen comes into view. This is particularly handy when we are trying to stop something when the page is unfocused, like stopping a video or audio file from playing, or stopping the tracking of a user's location. @@ -236,7 +236,7 @@ See the [`useFocusEffect`](https://reactnavigation.org/docs/use-focus-effect/) d ## Re-rendering screen with the `useIsFocused` hook -React Navigation provides a [hook](https://reactjs.org/docs/hooks-intro.html) that returns a boolean indicating whether the screen is focused or not. +React Navigation provides a [hook](use-is-focused.md) that returns a boolean indicating whether the screen is focused or not. The hook will return `true` when the screen is focused and `false` when our component is no longer focused. This enables us to render something conditionally based on whether the user is on the screen or not. diff --git a/versioned_docs/version-7.x/getting-started.md b/versioned_docs/version-7.x/getting-started.md index 00b4f6cb33..32907b57bd 100755 --- a/versioned_docs/version-7.x/getting-started.md +++ b/versioned_docs/version-7.x/getting-started.md @@ -15,7 +15,7 @@ If you're already familiar with JavaScript, React and React Native, then you'll Here are some resources to help you out: -1. [React Native Express](https://www.reactnative.express) (Sections 1 to 4) +1. [React Native](https://reactnative.dev/docs/getting-started) 2. [Main Concepts of React](https://react.dev/learn) 3. [React Hooks](https://react.dev/reference/react) 4. [React Context](https://react.dev/learn/passing-data-deeply-with-context) (Advanced) diff --git a/versioned_docs/version-7.x/hello-react-navigation.md b/versioned_docs/version-7.x/hello-react-navigation.md index 666056ea09..8083664af5 100755 --- a/versioned_docs/version-7.x/hello-react-navigation.md +++ b/versioned_docs/version-7.x/hello-react-navigation.md @@ -489,7 +489,7 @@ Passing additional props to a screen is not supported in the static API. Sometimes we might want to pass additional props to a screen. We can do that with 2 approaches: -1. Use [React context](https://reactjs.org/docs/context.html) and wrap the navigator with a context provider to pass data to the screens (recommended). +1. Use [React context](https://react.dev/reference/react/useContext) and wrap the navigator with a context provider to pass data to the screens (recommended). 2. Use a render callback for the screen instead of specifying a `component` prop: ```js @@ -501,7 +501,7 @@ Sometimes we might want to pass additional props to a screen. We can do that wit :::warning -By default, React Navigation applies optimizations to screen components to prevent unnecessary renders. Using a render callback removes those optimizations. So if you use a render callback, you'll need to ensure that you use [`React.memo`](https://reactjs.org/docs/react-api.html#reactmemo) or [`React.PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) for your screen components to avoid performance issues. +By default, React Navigation applies optimizations to screen components to prevent unnecessary renders. Using a render callback removes those optimizations. So if you use a render callback, you'll need to ensure that you use [`React.memo`](https://react.dev/reference/react/memo) or [`React.PureComponent`](https://react.dev/reference/react/PureComponent) for your screen components to avoid performance issues. ::: diff --git a/versioned_docs/version-7.x/native-stack-navigator.md b/versioned_docs/version-7.x/native-stack-navigator.md index 4c31be33b6..af8b1fb7c7 100755 --- a/versioned_docs/version-7.x/native-stack-navigator.md +++ b/versioned_docs/version-7.x/native-stack-navigator.md @@ -313,7 +313,7 @@ This is useful if you want to render a semi-transparent header or a blurred back Note that if you don't want your content to appear under the header, you need to manually add a top margin to your content. React Navigation won't do it automatically. -To get the height of the header, you can use [`HeaderHeightContext`](elements.md#headerheightcontext) with [React's Context API](https://reactjs.org/docs/context.html#contextconsumer) or [`useHeaderHeight`](elements.md#useheaderheight). +To get the height of the header, you can use [`HeaderHeightContext`](elements.md#headerheightcontext) with [React's Context API](https://react.dev/reference/react/useContext#contextconsumer) or [`useHeaderHeight`](elements.md#useheaderheight). #### `headerBlurEffect` diff --git a/versioned_docs/version-7.x/navigation-container.md b/versioned_docs/version-7.x/navigation-container.md index e4f7e7125a..f43746676a 100644 --- a/versioned_docs/version-7.x/navigation-container.md +++ b/versioned_docs/version-7.x/navigation-container.md @@ -62,7 +62,7 @@ export default function App() { ## Ref -It's possible to pass a [`ref`](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs) to the container to get access to various helper methods, for example, dispatch navigation actions. This should be used in rare cases when you don't have access to the [`navigation` object](navigation-object.md), such as a Redux middleware. +It's possible to pass a [`ref`](https://react.dev/learn/referencing-values-with-refs) to the container to get access to various helper methods, for example, dispatch navigation actions. This should be used in rare cases when you don't have access to the [`navigation` object](navigation-object.md), such as a Redux middleware. Example: diff --git a/versioned_docs/version-7.x/nesting-navigators.md b/versioned_docs/version-7.x/nesting-navigators.md index a1537b215a..bb96f16f59 100755 --- a/versioned_docs/version-7.x/nesting-navigators.md +++ b/versioned_docs/version-7.x/nesting-navigators.md @@ -189,7 +189,7 @@ If you want to achieve this behavior, see the guide for [screen options with nes For example, any `params` passed to a screen in a nested navigator are in the `route` object of that screen and aren't accessible from a screen in a parent or child navigator. -If you need to access params of the parent screen from a child screen, you can use [React Context](https://reactjs.org/docs/context.html) to expose params to children. +If you need to access params of the parent screen from a child screen, you can use [React Context](https://react.dev/reference/react/useContext) to expose params to children. ### Navigation actions are handled by current navigator and bubble up if couldn't be handled diff --git a/versioned_docs/version-7.x/screen.md b/versioned_docs/version-7.x/screen.md index b672203dc7..8589e63068 100644 --- a/versioned_docs/version-7.x/screen.md +++ b/versioned_docs/version-7.x/screen.md @@ -348,11 +348,11 @@ Another way is to pass a render callback to return React Element to use for the ``` -You can use this approach instead of the `component` prop if you need to pass additional props. Though we recommend using [React context](https://reactjs.org/docs/context.html) for passing data instead. +You can use this approach instead of the `component` prop if you need to pass additional props. Though we recommend using [React context](https://react.dev/reference/react/useContext) for passing data instead. :::warning -By default, React Navigation applies optimizations to screen components to prevent unnecessary renders. Using a render callback removes those optimizations. So if you use a render callback, you'll need to ensure that you use [`React.memo`](https://reactjs.org/docs/react-api.html#reactmemo) or [`React.PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) for your screen components to avoid performance issues. +By default, React Navigation applies optimizations to screen components to prevent unnecessary renders. Using a render callback removes those optimizations. So if you use a render callback, you'll need to ensure that you use [`React.memo`](https://react.dev/reference/react/memo) or [`React.PureComponent`](https://react.dev/reference/react/PureComponent) for your screen components to avoid performance issues. ::: diff --git a/versioned_docs/version-7.x/use-is-focused.md b/versioned_docs/version-7.x/use-is-focused.md index 0f874dbccc..b0bad164ba 100755 --- a/versioned_docs/version-7.x/use-is-focused.md +++ b/versioned_docs/version-7.x/use-is-focused.md @@ -96,7 +96,7 @@ export default function App() { -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. +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://react.dev/reference/react/memo) or [`React.PureComponent`](https://react.dev/reference/react/PureComponent) to minimize re-renders for them. ## Using with class component