In React Navigation 7, when should a screen use useIsFocused rather than useFocusEffect or navigation.isFocused()?

## Three ways to ask whether a screen is focused **React Navigation 7** offers three APIs that all answer the question "is this screen focused?", and interviewers use them to check whether a candidate separates rendering from side effects. | API | What it gives you | Re-renders on focus change | Typical use | |---|---|---|---| | `useIsFocused()` | a boolean for the current render | yes | render something only while visible | | `useFocusEffect(cb)` | runs `cb` on focus, its cleanup on blur | no | fetch, subscribe, start timers | | `navigation.isFocused()` | the value at the moment of the call | no | inside an event handler | All three read the same underlying state: the route is focused when it is the focused route of its navigator and every parent navigator up to the container. ## useIsFocused: when output depends on focus `useIsFocused()` subscribes to the screen's `focus` and `blur` events (or to a focus context when the screen is rendered through a `NavigationProvider`) and returns `true` or `false`. When the value changes, the component re-renders. The canonical use is a resource that should exist only while the screen is on show. On a shop app's `Scan` tab, a barcode scanner's camera preview should not keep the camera running after the user switches to `Cart`, because tabs stay mounted after their first visit: ```tsx import type { ComponentType } from 'react'; import { useIsFocused } from '@react-navigation/native'; import { Text, View } from 'react-native'; export function ScanTab({ Preview }: { Preview: ComponentType }) { const isFocused = useIsFocused(); return <View style={{ flex: 1 }}>{isFocused ? <Preview /> : <Text>Paused</Text>}</View>; } ``` Unmounting the preview when the tab blurs releases the camera; mounting it again on focus restarts it. Other examples: - pausing a video or an animation that is expensive to keep running; - switching a status bar or header appearance for the visible screen only; - deferring an expensive subtree until the screen is actually visible. ## How focus is decided A screen is focused only when it is the focused route of its own navigator **and** its parent screen is focused too, all the way up to the container. `navigation.isFocused()` implements exactly that walk: it compares the navigator's focused route key with the screen's key and then asks the parent. The practical effect is that a screen inside a stack that sits inside a tab is unfocused whenever its tab is not selected, even though it is still on top of its own stack. `useIsFocused()` keeps that value current by subscribing through React's `useSyncExternalStore` to the screen's focus and blur events. ## useFocusEffect: when work depends on focus If the goal is to **do** something rather than **show** something, `useFocusEffect` is the better tool. It runs a memoised callback when the screen gains focus and its cleanup when it loses focus, without re-rendering anything. Implementing a refetch with `useIsFocused` plus `useEffect(…, [isFocused])` works, but costs an extra render on every focus change and spreads one concern across two hooks. ## navigation.isFocused(): only outside render `navigation.isFocused()` is a method, not a hook. It returns the focus state at the moment it is called and does not subscribe, so a component that calls it during render keeps showing whatever value it saw last until something else re-renders it. The type definitions warn against using it in render. It is the right tool in callbacks: - a push-notification handler deciding whether to show an in-app banner or to navigate; - a timer callback checking whether the screen is still visible before updating it; - an event listener that should ignore events while the screen is hidden. ## Performance considerations Every component that calls `useIsFocused()` re-renders on **each** focus and blur. Placed at the top of a large screen, that re-renders the whole screen twice for a round trip to another tab. Keep the hook in the smallest component whose output depends on it, as the `ScanTab` wrapper above does, and pass the boolean down only where needed. For suspending re-renders of whole inactive screens, the navigator option `freezeOnBlur` is the dedicated mechanism. **Common mistakes:** 1. Using `useIsFocused` purely to trigger a fetch, when `useFocusEffect` would do it without extra renders. 2. Reading `navigation.isFocused()` in JSX and wondering why the UI does not update. 3. Forgetting that focus covers navigation only: an app returning from the background does not change it.