after-react-18.js

function Demo() {
  function ProcessAndRender() {
    const fetcher = (url) => fetch(url).then((r) => r.json());
    const { data } = useSwr(
      `https://jsonplaceholder.typicode.com/todos`,
      fetcher,
      { suspense: true }
    );
    return (
      <div className="container grid">
        {data.map((rec) => {
          return (
            <div className="row" key={rec.id}>
              <div className="col-2">{rec.userId}</div>
              <div className="col-8">{rec.title}</div>
              <div className="col-2">
                {rec.completed === true ? "yes" : "no"}
              </div>
            </div>
          );
        })}
      </div>
    )
  }

  return (
    <Suspense fallback={<div>fallback URL loading</div>}>
      <ProcessAndRender />
    </Suspense>
  );
}

export default Demo;