function ProfileScreen() {

  const [user, setUser] = useState<User | undefined>()
  const [friends, setFriends] = useState<User[]>([])

  useEffect(() => {
    fetchDatabaseUser()
      .then((data) => setUser(data))
      .catch(console.warn)
  }, [])

  useEffect(() => {
    if (!user?.id) return
    fetchFriendsList()
      .then((data) => setFriends(data))
      .then(console.warn)
  }, [user?.id])

  // more conditional logic...

  return user ? (
    <UserProfile />
  ) : (
    <LoadingView />
  )
}

function ProfileContainer() {
  const user: User | undefined = useDatabaseUser()
  return (
    <Safely render={ProfileScreen} with={{ user }} when={Boolean(user)} />
  )    
}

function ProfileScreen({ user }: { user: User }) {
  const friends = useFriendsList(user)
  const analytics = useAnalytics(user)
  const userActions = useActions(user)
  return (<UserProfile />
}