Prevents re-renders of components that aren't on the focused screen
npm install 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.
`
npm i react-navigation-focus-render --save
`
import FocusRender from 'react-navigation-focus-render'
const ExpensiveComponent = () => {
const {count} = useCount(); // something that hooks into changing state
return (
... Components
)
}
`
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}) => (
);
const ExpensiveComponent = () => {
const {count} = useCount(); // something that hooks into changing state
return (
... Components
)
}
``
You can see the example project 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.
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.