How to fetch multiple URLs (non-constant number) at once?

[supermihi]

Say I need to fetch a list of remote resources, while the length on the list depends on the current props. (How) can I achieve that with use-http? As far as I understand the documentation of react, the number of hooks in a component needs to be constant.

[alex-cory]

I'm assuming you're talking about pagination? You could do something like

const SomeComp = ({ page, pageLength }) => {
  const [list, setList] = useState([])
  const { get, loading } = useFetch('url')

  const fetchList = async () => {
    const theList = await get(`?page=${page}&pageLength=${pageLength}`)
    setList(theList)
  }

  const mounted = useRef(false)
  useEffect(() => { // componentDidMount
    if (!mounted.current) {
      fetchList()
      mounted.current = true
    }
  }, [])

  return <div>{list.map(item => <div>{item.text}</div>)}<div>
}

Does this make sense? Or are you asking something else?

[supermihi]

Sorry for being unclear. What I actually am trying to do is load multiple URLs at once:

const SomeComp = ({urls}) => {
  const images = // fetch all the urls
  return images.map(/* do something with the results*/)
}

However I understand now that I can probably solve it like this:

const [results, setResults] = useState([])
const request = useFetch()
async function fetchStuff() {
    for (const url of urls) {
        const result = await request.get(url)
        setResults([...results, result])
    }
  }
useEffect(() => { fetchStuff() })

[alex-cory]

You can do that, however it's always recommended that you don't have api calls/awaits in loops. Why do you need to make an api call for image urls? If you're displaying images, why not just do imageUrls.map(url => <img src={url} />)

[supermihi]

In my application I am fetching data, not images – that was just for the example.

[alex-cory]

You could do something like

const Comp = (props) => {
  const [imagesData, setImagesData] = useState([])
  const [loading, setLoading] = useState(false)
  const { get } = useFetch('url')

  const getImageData = useCallback(async () => {
    setLoading(true)
    const imgData = await images.map(async image =>  await get('/image?id=${image.id}'))
    setImagesData(imgData)
    setLoading(false)
  }, [props.images, imagesData, setImagesData, setLoading])

  const mounted = useRef(false)
  useEffect(() => {
    if (!mounted.current) { // on mount
      getImagesData()
    }
  }, [getImagesData])

  return (
    <>
      {loading && 'Loading...'}
      {imagesData.length > 0 && imagesData.map(img => <img src={img.url} />)}
    </>
  )
}

Is this something like what you're looking for?

[alex-cory]

@supermihi is your question answered? Gonna close this if it is :)

[supermihi]

@alex-cory thanks for your answer. The above should work (though I'd remove the mounted construct, which would prevent re-loading if props.images changes, right?).
However I don't really see the benefit of useFetch here, as opposed to calling fetch directly?

[alex-cory]

Oh yeah, that makes sense about the mounted part. In this case, the only benefit would be if you used the <Provider url='https://example.com'><App /></Provider>. Kind of like how axios works. Also, if you have authentication, you could handle that at the top level in addition to the syntax is a bit cleaner. Having the global fetch config is pretty nice.

[supermihi]

Ok, thanks a lot!