React + fetchstream-js: Render JSON as It Arrives

#ai #webdev #javascript #react

Most React apps still wait for the full JSON response before showing anything. That means a loading spinner, a blank table, and slower perceived performance. fetchstream-js solves this by parsing JSON progressively, so your UI can update as data arrives.

Install

npm install fetchstream-js

Basic React example

import { useEffect, useState } from "react";
import { fetchStream } from "fetchstream-js";

export default function Users() {
  const [snap, setSnap] = useState({ data: null, chunks: 0, done: false });

  useEffect(() => {
    fetchStream("/api/users")
      .live(({ data, chunks, done }) => {
      setSnap({ data, chunks, done });
      })
      .catch(console.error);
  }, []);

  return (
    <div>
      <h2>Users</h2>
      <pre>{JSON.stringify(snap.data, null, 2)}</pre>
      <p>{snap.chunks} chunks received {snap.done ? "• done" : ""}</p>
    </div>
  );
}

Why this works well in React

With fetchstream-js, your component does not need to wait for the entire payload. The UI can render partial data early, which improves perceived performance and makes the app feel faster.