React Native inactive screen still re-rendering — performance impact?

In React Navigation, screens are kept mounted by default. When you navigate from Screen A to Screen B, Screen A becomes inactive (unfocused) but remains part of the React component tree. Since it is still mounted, React can re-render it whenever its inputs change.

Visibility is controlled by React Navigation, but rendering is controlled by React.

What usually triggers re-renders of inactive screens?

Inactive screens re-render for the same reasons active ones do:

1. Global state changes
   Redux, Zustand, MobX, etc. If the screen subscribes to global state, any relevant update will trigger a re-render.

2. Context updates
   All components consuming a context re-render when the context value changes.

3. Parent component re-renders
   If a navigator or parent component re-renders, all mounted screens may re-render.

4. Prop or navigation param changes
   New object/function references or updated params will trigger re-renders.

Recommended ways to handle this

1. Run side effects only when the screen is focused

import { useIsFocused, useFocusEffect } from '@react-navigation/native';
const isFocused = useIsFocused();
useEffect(() => {
  if (isFocused) {
    // fetch data 
    // start listeners
  }
}, [isFocused]);

2. Avoid expensive work during render
   Use useMemo, useCallback, and move heavy logic out of render.

3. Be selective with global state
   Subscribe only to the slices of state the screen actually needs.

4. Memoize components

export default React.memo(ScreenA);

5. Unmount screens only if necessary

options={{ unmountOnBlur: true }}

This removes the screen entirely but also resets local state and can affect navigation performance.

6. Use native optimizations