Academy
mediumReact Native#10

Screen focus listener

Prompt

Create a component that uses useFocusEffect to refresh data every time the screen gains focus. Log "screen focused" when focused. Simulate a data fetch that returns "fresh data".

Solution

const [data, setData] = useState('')
useFocusEffect(useCallback(() => {
  console.log('screen focused')
  setData('fresh data')
  return () => console.log('screen unfocused')
}, []))
return <Text>{data}</Text>
Mentor's take

This hook exists because of a lifecycle mismatch: in a stack navigator, screens stay mounted when you push on top of them. A useEffect with [] runs once at mount — so when the user navigates away and comes back, your "fetch on mount" never re-fires and the screen shows stale data. useFocusEffect re-anchors the effect to the navigation lifecycle: it runs on every focus and cleans up on every blur (and on unmount), which is exactly the contract "refresh when the user returns" needs.

The useCallback wrapper is not decoration — it's required for correctness. useFocusEffect re-runs its callback whenever the callback's identity changes; an inline arrow is a new function every render, so without useCallback([]) the effect tears down and re-runs on every render while focused. The deps array of the useCallback becomes, effectively, the deps array of the focus effect.

The blur cleanup is where real value hides: cancel in-flight requests, stop timers or sensor subscriptions — work that shouldn't continue while the screen is buried under another.

Red flag: "I fetch in useEffect on mount" for a stack screen — the interviewer will ask what happens on back-navigation, and the answer is stale data.

Say it: "Stack screens stay mounted under pushed screens, so mount-time effects go stale — useFocusEffect with a useCallback-stabilized callback re-syncs on every focus and cleans up on blur."