https://github.com/flagsmith/react-navigation-focus-render
Wrapping components in this will ensure that they are only rendered when the screen is focused
https://github.com/flagsmith/react-navigation-focus-render
Last synced: 6 months ago
JSON representation
Wrapping components in this will ensure that they are only rendered when the screen is focused
- Host: GitHub
- URL: https://github.com/flagsmith/react-navigation-focus-render
- Owner: Flagsmith
- Created: 2022-02-20T09:14:55.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-02-20T16:09:16.000Z (about 4 years ago)
- Last Synced: 2025-09-29T00:46:22.418Z (6 months ago)
- Language: TypeScript
- Size: 459 KB
- Stars: 13
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://www.flagsmith.com/)
# react-navigation-focus-render
Screens within a stack or in tabs will still render when any global state(Redux/Context etc) is updated. This component lets you avoid these renders when the screens are inactive.
Read a more in depth article about this [here](https://dev.to/kylessg/improving-your-react-native-application-performance-with-react-navigation-focus-render-2hih)
# Installation
``
npm i react-navigation-focus-render --save
``
# Usage
```
import FocusRender from 'react-navigation-focus-render'
const ExpensiveComponent = () => {
const {count} = useCount(); // something that hooks into changing state
return (
... Components that will only re-render when the screen is focused
)
}
```
# Advanced usage
You may wish to add a wrapper component that displays differently whilst the inactive component hydrates its state when the screen becomes active.
You can specify a Wrapper component that takes isFocused as a property.
```
import FocusRender from 'react-navigation-focus-render'
const Wrapper = ({isFocused, children}) => (
{children}
);
const ExpensiveComponent = () => {
const {count} = useCount(); // something that hooks into changing state
return (
... Components that will only re-render when the screen is focused
)
}
```
# Example
This repository includes an [example project](/example) that demonstrates this working in a simple way.
[HomeScreen](./example/app/components/screens/HomeScreen.tsx):
- Contains an expensive component that renders 5000 text elements and is connected to redux state "count"
- You can toggle between rendering the component via FocusRender or just by itself
[Screen2](./example/app/components/screens/Screen2.tsx):
- Contains a screen with a button that updates state "count"
Given this simple example, the difference in performance when updating state can be measured using [https://github.com/Flagsmith/react-native-performance-monitor](react-native-performance-monitor).
Of course, this is quite an extreme example but given an active stack of many tabs / screens this could easily add up if you have complex components.