Note: If you want to support SSR/SSG for SEO, use framework specific api from React-router/Remix, Next.js or Gatsby.

For React version >=19

We now have nice loader and form action api:

Loading data:

function Comments({ dataPromise }) {
  const data = use(dataPromise);
  return <div>{JSON.stringify(data)}</div>;
}

async function loadData() {
  return { data: "some data" };
}

export function Index() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Comments dataPromise={loadData()} />
    </Suspense>
  );
}

Form actions

async function updateDataAndLoadNew() {
  // update data
  // load new data

  // return new data
  return { data: "some data" };
}

export default function Index() {
  const [state, action, isPending] = useActionState(
    async (prev, formData) => {
      return updateUserAndLoadNewData();
    },
    { data: "initial state, no data" } // can be null
  );

  if (state.error) {
    return `Error ${state.error.message}`;
  }

  return (
    <form action={action}>
      <input type="text" name="name" />
      <button type="submit" disabled={isPending}>
        Do it
      </button>
      {state.data && <p>Data {state.data}</p>}
    </form>
  );
}

For React version >=18

Starting with React 18 you can also use Suspense, but it's not yet recommended if you are not using frameworks that correctly implement it:

In React 18, you can start using Suspense for data fetching in opinionated frameworks like Relay, Next.js, Hydrogen, or Remix. Ad hoc data fetching with Suspense is technically possible, but still not recommended as a general strategy.

If not part of the framework, you can try some libs that implement it like swr.

Oversimplified example of how suspense works. You need to throw a promise for Suspense to catch it, show fallback component first and render Main component when promise it's resolved.

let fullfilled = false;
let promise;

const fetchData = () => {
  if (!fullfilled) {
    if (!promise) {
      promise = new Promise(async (resolve) => {
        const res = await fetch('api/data')
        const data = await res.json()

        fullfilled = true
        resolve(data)
      });
    }

    throw promise
  }
};

const Main = () => {
  fetchData();
  return <div>Loaded</div>;
};

const App = () => (
  <Suspense fallback={"Loading..."}>
    <Main />
  </Suspense>
);

For React version <=17

I suggest to look at Dan Abramov (one of the React core maintainers) answer here:

I think you're making it more complicated than it needs to be.

function Example() {
  const [data, dataSet] = useState<any>(null)

  useEffect(() => {
    async function fetchMyAPI() {
      let response = await fetch('api/data')
      response = await response.json()
      dataSet(response)
    }

    fetchMyAPI()
  }, [])

  return <div>{JSON.stringify(data)}</div>
}

Longer term we'll discourage this pattern because it encourages race conditions. Such as — anything could happen between your call starts and ends, and you could have gotten new props. Instead, we'll recommend Suspense for data fetching which will look more like

const response = MyAPIResource.read();

and no effects. But in the meantime you can move the async stuff to a separate function and call it.

You can read more about experimental suspense here.

If you want to use functions outside with eslint.

 function OutsideUsageExample({ userId }) {
  const [data, dataSet] = useState<any>(null)

  const fetchMyAPI = useCallback(async () => {
    let response = await fetch('api/data/' + userId)
    response = await response.json()
    dataSet(response)
  }, [userId]) // if userId changes, useEffect will run again

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

  return (
    <div>
      <div>data: {JSON.stringify(data)}</div>
      <div>
        <button onClick={fetchMyAPI}>manual fetch</button>
      </div>
    </div>
  )
}

Overall, you are heading in the right direction. For fetching data, you'd wanna use useEffect and pass [] as a second argument to make sure it fires only on initial mount.

I believe you could benefit from decoupling fetchJson function and making it more generic, as such:

const fetchJson = async (url) => {
  const response = await fetch(url);
  return response.json();
};

const Fetch = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchJson("https://api.coindesk.com/v1/bpi/currentprice.json")
      .then(({ disclaimer }) => setData(disclaimer));
  }, []);

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

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.

There's a couple of problems with this snippet:

{videos.id.map((video) => {
  <div key={video.id} {...videos}></div>
})}

1. In your code the videos variable is initially null, and then (after fetching) — an array. Arrays don't have id property, and accessing properties of null is an illegal operation. You might want to first ensure that this is an array, rather than null, and then also remove the ".id" part.

2. You don't return anything from .map()! Yes, you create a JSX element for each item of the array, but they are destroyed unused after that.

Consider using this instead:

{videos && videos.map((video) => (
  <div key={video.id} {...videos}></div>
))}

Another problem is with variables' visibility:

import videos from "./path/to/data.json";
// and then later
const [ videos, setVideos ] = useState(null);

That first variable videos (the imported one) is not visible anymore, it got shadowed by the second one.

You either rename the second variable to prevent shadowing, or remove the first one completely as it is unused.

Next thing that I can see is that the code can't make up its mind about what it is actually trying to accomplish. On one hand, router provides an ID to a specific, particular video, which means that we're trying to show only one video. On the other hand though, the FeaturedVideo component is almost a perfect fit for showing the list of all the videos.

Judging from the names and overall setup though, it is somewhat clear that you're trying to show one video, not the whole list.

Looks like you're using react-router. If that's true, in FeaturedVideo you need to access the video ID, provided by router. Given that it is v5+, you can use useParams hook for that:

import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router';

const [ video, setVideo ] = useState(null); // 'video', not 'videos'
const { videoID } = useParams();

useEffect(() => {
  fetch("/src/data/data.json")
    .then((res) => res.json())
    .then((videos) => videos.filter((video) => {
      return video.id === videoID;
    }))
    .then((matched) => setVideo(matched[0]));
}, []);

// Here `video` variable holds either `null` or the first matched array item.
// Render it using suggestions above.

References:

• .map() method of arrays
• && operator (see Description section)
• Variable shadowing
• React Router Hooks