React + fetchstream-js: Render JSON as It Arrives

CODING IN BLOOD — Thu, 30 Apr 2026 21:26:25 +0000

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.

When to use it

Use fetchstream-js for:

large JSON lists
dashboards
tables
any UI where early feedback matters

Final thought

If your React app spends too long on a spinner, fetchstream-js is a simple upgrade. One install, one hook, and your UI starts showing data sooner.

🔗 Links

NPM: https://www.npmjs.com/package/fetchstream-js
Live Example: https://fetchstream-js.vercel.app
Getting Started: https://eklavya-raj.github.io/fetchstream-js/guide/getting-started