use-http icon indicating copy to clipboard operation
use-http copied to clipboard

Fetching multiple URLs at once

Open ianstormtaylor opened this issue 3 years ago • 1 comments

How can you use use-http to fetch multiple URLs at once with a single hook? Ideally there would be a way to pass in an array which described a list of fetches instead of being limited to a single fetch.

This is necessary to get around React Hooks's limitation of hooks being constant in render. For example, consider a component that receives a list of user IDs:

const UserList = ({ ids }) => {
  const { data, loading, error } = useFetch(ids.map(id => `/user/${id}`), [ids])
  if (loading) return <div>Loading…</div>
  if (error) return <div>Error!</div>
  return (
    <div>
      <h3>{data.length} Users</h3>
      {data.map(user => <User key={user.id} user={user} />)}
    </div>
  )
}

I don't see a way to solve this currently with use-http?

I saw https://github.com/ava/use-http/issues/83 but it didn't seem to be solved, it suggested a solution that seems pretty roundabout, whereas I think this is so core that it should be solved in the library itself.

ianstormtaylor avatar Dec 06 '20 01:12 ianstormtaylor

hey u should use a POST and send an array of ids to your endpoint... your code looks bad in performance and maintenance

grinsteindavid avatar Feb 20 '21 18:02 grinsteindavid