useRemote

[dy]

react-query

function Todos() {
  const { data, isLoading, error } = useQuery('todos',async () => {const res = await fetch(...args)
  return await res.json()})

  return (
    <div>
      {isLoading ? (
        <span>Loading...</span>
      ) : error ? (
        <span>Error: {error.message}</span>
      ) : data ? (
        <ul>
          {data.map(todo => (
            <li key={todo.id}>{todo.title}</li>
          ))}
        </ul>
      ) : null}
    </div>
  )
}

zeit/swr

function Profile () {
  const { data, error } = useSWR('/api/user', fetcher)

  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}

use-request

// User Profile component
function UserProfile(props) {
  const [profile, getProfile] = useResource(id => ({
    url: `/user/${id}`,
    method: 'GET'
  }))

  useEffect(() => getProfile(props.userId), [])

  if(profile.isLoading) return <Spinner />

  return (
    <ProfileScreen
      avatar={profile.data.avatar}
      email={profile.data.email}
      name={profile.data.name} />
  )
}

use-api

export const Main = () => {
  const [data, { loading, error }, request] = useApi({
    url: '/api/foo/bar'
  })

  return (
    <>
      {loading && <div>Loading...</div>}
      {error && <div>{error.response.data.errMsg}</div>}
      {data && (
        <>
          <div>Hello! {data.username}</div>
          <button onClick={request}>Reload</button>
        </>
      )}
    </>
  )
}

use-abortable-fetch

const ChuckNorrisJoke = () => {
  const { data, loading, error, abort } = useAbortableFetch(
    '//api.icndb.com/jokes/random/?limitTo=[nerdy]&escape=javascript'
  );

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  if (!data) return null;

  return <div>Joke: {data.value.joke}</div>;
};

use-http

function App () {
  const { loading, error, data } = useFetch('https://example.com/todos', options)
  // const [request, response] = useFetch('...')

  return (
    <>
      {error && 'Error!'}
      {loading && 'Loading...'}
      {data.map(todo => (
        <div key={todo.id}>{todo.title}</div>
      )}
    </>
  )
}

use-request

function App () {
  const [{ loading, error, data }, fetch] = useRequest(getFooApi)

  useEffect(() => { fetch() }, [fetch])

  if (loading) return 'loading'
  if (error) return 'error'

  return data && <div>{data}</div>
}

[dy]

Actually useRemote can be an async storage hook - get/set are async functions there.
In similar way useChannel is sync in general, but initialization is async.
Should that be useAsyncStorage?