useFocusEffect

Similar to React useEffect, but only runs when the current route is focused. The effect runs when the screen comes into focus and the cleanup runs when it goes out of focus.

Unlike React Navigation's useFocusEffect which requires wrapping your callback in useCallback, One's version accepts a dependency array as the second argument directly.

import { useFocusEffect } from 'one'

function Profile({ userId }) {
  const [user, setUser] = useState(null)

  useFocusEffect(
    () => {
      const unsubscribe = API.subscribe(userId, (user) => setUser(user))
      return () => unsubscribe()
    },
    [userId]
  )

  return <ProfileContent user={user} />
}

| Parameter | Type | Description | |-----------|------|-------------| | effect | () => void \| (() => void) | The effect function to run. Can optionally return a cleanup function. | | deps | any[] | Dependency array, similar to useEffect. The effect re-runs when dependencies change. |

• Focus: The effect runs when the screen becomes focused
• Blur: The cleanup function (if returned) runs when the screen loses focus
• Dependencies: The effect also re-runs when dependencies change, but only if the screen is focused