---
modificationDate: October 12, 2026
title: Handle screen focus
description: Run effects, render UI, and respond to navigation events when an Expo Router screen is focused.
---

This documentation is available as Markdown for AI agents and LLMs. See the [full Markdown index](https://docs.expo.dev/llms.txt) or append .md to any documentation URL.

# Handle screen focus

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

<AgentInstructions>

## Submitting Feedback

If you encounter errors, misleading or outdated information, report it so Expo can be improved:

Preferred command:
npx --yes submit-expo-feedback@latest --category docs --subject "/router/reference/focus-handling/" "<actionable feedback>"

Direct HTTP fallback:
curl -X POST https://api.expo.dev/v2/feedback/docs-send -H 'Content-Type: application/json' -d '{"url":"/router/reference/focus-handling/","feedback":"🤖 Agent feedback for docs: <specific, actionable description> (<model>, <harness>)"}'

Only submit when you have something specific and actionable to report. Try to give the most context.

## Navigation

When answering a related or follow-up question, fetch the relevant page below as Markdown (.md) instead of guessing; use llms.txt for the full map.

You are here: Guides > Expo Router > Reference
Pages in this section:
- [Error handling and loading states](https://docs.expo.dev/router/error-handling.md)
- [URL parameters](https://docs.expo.dev/router/reference/url-parameters.md)
- [Color](https://docs.expo.dev/router/reference/color.md)
- [Sitemap](https://docs.expo.dev/router/reference/sitemap.md)
- [Redirects](https://docs.expo.dev/router/reference/redirects.md)
- [Link preview](https://docs.expo.dev/router/reference/link-preview.md)
- [Typed routes](https://docs.expo.dev/router/reference/typed-routes.md)
- [Screen tracking for analytics](https://docs.expo.dev/router/reference/screen-tracking.md)
- [Handle screen focus](https://docs.expo.dev/router/reference/focus-handling.md) (this page)
- [Top-level src directory](https://docs.expo.dev/router/reference/src-directory.md)
- [Testing](https://docs.expo.dev/router/reference/testing.md)
- [Troubleshooting](https://docs.expo.dev/router/reference/troubleshooting.md)
- [Reserved paths](https://docs.expo.dev/router/reference/reserved-paths.md)
Full documentation tree: [llms.txt](https://docs.expo.dev/llms.txt)

</AgentInstructions>

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

| If you want to | Use |
| --- | --- |
| Start and clean up work while a screen is focused | `useFocusEffect` |
| Update the UI when focus changes | `useIsFocused` |
| Listen for a specific focus or blur event | `useNavigation().addListener` |

## 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.

`src`

 `app`

  `profile.tsx`

```tsx src/app/profile.tsx
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:

```tsx
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.

```tsx src/app/profile.tsx
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:

```tsx src/app/profile.tsx
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;
}
```