Setting React state from JSON data in useEffect

I need to fetch json data and iterate over it, fetching some more json data later, and finally setting React states. I'd like to use a general function to handle all file requests. I'd also like to handle different types of errors (404 and json parsing, mostly).

I've read How to use async functions in useEffect and several other relevant articles, but whatever I try to do outside of my fetchData function, I keep getting only Promises instead of data.

Also, this only needs to be done once, when the main App.js load. Is it good practice to use an Effect for that, or should it be done at the top of the file, before the App component itself (which needs the data)?

  useEffect(() => {
    async function fetchData(url) {
      const response = await fetch(url, {
        headers : { 
          'Content-Type': 'application/json',
          'Accept': 'application/json'
          }
      })
      if (!response.ok) {
        return Promise.reject(`File not found: ${url}`)
      } else {
        const json = await response.json()
          .then(res => { return res })
          .catch(err => { return Promise.reject(`JSON Error (${url}): ${err}`) })
        // I can use "json" here...
      }
    }

    // ...but I need it here
    const json = fetchData('data/initial-data.json')
      .catch(err => console.log('Error ' + err))
    // to iterate over its contents with more calls to fetchData
    for (const item in json) {
      const moreData = fetchData(`data/moredata-${item}.json`)
        .catch(err => console.log(`Error: ${err}`))
      // do something with moreData
      // such as setState
    }
  }, [])

You just need to return the json from the fetchData function and await it where you need it:

  useEffect(() => {
async function fetchData(url) {
const response = await fetch(url, {
headers : { 
'Content-Type': 'application/json',
'Accept': 'application/json'
}
})
if (!response.ok) {
throw new Error(`Failed to fetch ${url}, got ${response.status}`)
}
// note the return
return await response.json()
}
// Note need the IIFE wrapper here because you
// can't return a Promise from the useEffect callback
(async function() {
try {
const initialData = await fetchData(whatever)
const allData = await Promise.all(initialData.map(async (data) => {
try {
// fetch and return more data
const moreData = await fetchData(data.whatever)
return moreData
} catch (err) {
// do something with error, can return it or some
// sentinel value like null
return err
}
}))
// setState, filtering out the failures
setState(allData.filter(x => !(x instanceof Error))
} catch (err) {
console.error('failed initial fetch')
}
})()
}, [])

On a side note don't mix .then/.catch with async/await in the same expression, and don't reject with strings as many Promise rejection handling code implicitly assumes the thing that caused the rejection is an actual error instance. If you wouldn't throw it don't reject a Promise with it.