This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.

Run effects, render UI, and respond to navigation events when an Expo Router screen is focused.

Expo Router provides three ways to respond when a screen gains or loses focus:

Run an effect when a screen is focused

Use useFocusEffect for work that should run only while a screen is focused, such as a subscription. Wrap the callback in useCallback so the effect does not run on every render.

import { useCallback } from 'react';
import { useFocusEffect } from 'expo-router';

export default function Profile() {
  useFocusEffect(
    useCallback(() => {
      const subscription = subscribeToProfileUpdates();

      return () => subscription.unsubscribe();
    }, [])
  );

  return null;
}

The callback runs when the screen comes into focus. While the screen remains focused, it also runs again if any of its dependencies change.

Return a cleanup function to stop the work when the screen loses focus, the dependencies change, or the component unmounts.

Pass dependencies to useFocusEffect

useFocusEffect accepts only one argument. Put dependencies in the useCallback dependency array:

useFocusEffect(
  useCallback(() => {
    const subscription = subscribeToProfileUpdates(profileId);
    return () => subscription.unsubscribe();
  }, [profileId])
);

Render based on focus

Use useIsFocused when the rendered UI depends on whether the screen is focused. It returns a boolean and re-renders the component when focus changes.

import { useIsFocused } from 'expo-router';

export default function Profile() {
  const isFocused = useIsFocused();

  return <ProfileContent showLiveStatus={isFocused} />;
}

Listen for focus and blur events

Prefer useFocusEffect whenever possible. Use useNavigation().addListener only when you cannot express the work as an effect tied to screen focus.

Use useNavigation to run code for a specific focus or blur event. Subscribe in an effect and remove both listeners in its cleanup:

import { useEffect } from 'react';
import { useNavigation } from 'expo-router';

export default function Profile() {
  const navigation = useNavigation();

  useEffect(() => {
    const removeFocusListener = navigation.addListener('focus', recordProfileView);
    const removeBlurListener = navigation.addListener('blur', pauseProfileUpdates);

    return () => {
      removeFocusListener();
      removeBlurListener();
    };
  }, [navigation]);

  return null;
}