React18: Async Data Fetching Patterns

import { useCallback, useState, useEffect } from "react";
import "./styles.css";

export default function App() {
  const [fooData, setFooData] = useState<null | any>(null);

  const fetchData = useCallback(async () => {
    const res = await fetch("https://jsonplaceholder.typicode.com/posts/1");
    const data = await res.json();
    console.log(data);
    setFooData(data);
  });
  useEffect(() => {
    fetchData();
  }, []);
  return (
    <div className="App">
      {fooData ? (
        <div>
          <div>{fooData.userId}</div>
          <div>{fooData.title}</div>
          <div>{fooData.body}</div>
        </div>
      ) : (
        <div></div>
      )}
    </div>
  );
}