# react-navigation-focus-render

> Prevents re-renders of components that aren't on the focused screen

Latest version **0.0.1** (published 2022-02-20) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-navigation-focus-render
pnpm add react-navigation-focus-render
yarn add react-navigation-focus-render
bun add react-navigation-focus-render
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2022-02-20 |
| First published | 2022-02-20 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 81.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 13 |
| Author | kyle-ssg |
| Maintainers | kyle-ssg |
| Keywords | react-native, performance, react-navigation |

## Links

- npm: https://www.npmjs.com/package/react-navigation-focus-render
- Repository: https://github.com/Flagsmith/react-navigation-focus-render
- Homepage: https://github.com/Flagsmith/react-navigation-focus-render#readme
- Issues: https://github.com/Flagsmith/react-navigation-focus-render/issues
- npm.io page: https://npm.io/package/react-navigation-focus-render

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.1 (latest) — 2022-02-20

## README

[![Feature Flag, Remote Config and A/B Testing platform, Flagsmith](static-files/hero.png)](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.


# 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 (
     <FocusRender>
       ... Components
     </FocusRender>
   ) 
}
```

# 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}) => (
  <View style={{opacity: isFocused ? 1 : 0.5}}>{children}</View>
);

const ExpensiveComponent = () => {
   const {count} = useCount(); // something that hooks into changing state
   
   return (
     <FocusRender Wrapper={Wrapper}>
       ... Components
     </FocusRender>
   ) 
}
```

# Example

You can see the [example project](/example) to see this working.

HomeScreen: 

- 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

TabScreen

- 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).


![img.png](img.png)

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.

---
_Source: https://npm.io/package/react-navigation-focus-render · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._