Smooth rendering of streaming text content

I recently built a toy app that subscribes to a stream of text content and renders the content as it’s being delivered . The first approach I tried was to use a state and append chunks to the state as they come in.

const [text, setText] = useState('');

// inside an event handler
subscribe((chunk) => {
    setText(text => text + chunk);
});

// rendering
<pre> {text} </pre>

This works, but the rendering is not smooth. The text appears to come in “bursts”, because of server latency and different sizes of the chunks. It would look smooth if the latency when delivering each chunk is the same and the chunk is just one character.

In this post I describe one solution that I implemented that I think is pretty elegant. It’s based on a basic, but very important, concept in React in which a component state is preserved when the component is rendered in the same location in the UI tree. Let’s see how this solution works.

But first, we want a utility that simulates stream of content.

type Callback = (chunk: string, done: boolean) => void;
export function subscribe(callback: Callback) {
  const nextChunk = (i: number) => {
    const chunkLength = Math.max(Math.floor(Math.random() * 20), 1);
    const nextPos = i + chunkLength;

    const chunk = FAKE_CONTENT.slice(i, nextPos);
    const done = nextPos >= content.length;
    callback(chunk, done);

    if (done) {
      return;
    }

    const fakeLatency = Math.floor(Math.random() * 500), nextPos
    setTimeout(nextChunk, fakeLatency); 
  };

  nextChunk(0);
}

In this code above, callback is invoked with a variable length content with random delay. And FAKE_CONTENT is any string content, e.g. a song’s textual content. In our app, we subscribe when user clicks on button Fetch.

export default function App() {
  const [isPending, setIsPending] = useState(false);
  const lastClickTimestampRef = useRef(performance.now());
  const [response, setResponse] = useState("");

  function handleClick() {
    setResponse("");
    setIsPending(true);

    const clickTimestamp = performance.now();
    lastClickTimestampRef.current = clickTimestamp;

    subscribe((chunk, done) => {
      if (clickTimestamp < lastClickTimestampRef.current) {
        return;
      }

      if (done) {
        setIsPending(false);
        return;
      }

      setResponse((prev) => prev + chunk);
    });
  }

  return (
    <div className="App">
      <button onClick={handleClick}>Fetch</button>
      <Response
        key={lastClickTimestampRef.current}
        value={response}
        isPending={isPending}
      />
    </div>
  );
}

In case you’re wondering about the timestamp, it is just to cancel stale responses when user clicks Fetch multiple times rapidly. The trick to render the content as it comes in smoothly is in the Response component.

type Props = {
  value: string;
  isPending: boolean;
};

const SMOOTH_OUT_DELAY = 50;
function Response({ value, isPending }: Props) {
  const [index, setIndex] = useState(0);

  useEffect(() => {
    setTimeout(() => {
      if (index < value.length) {
        setIndex(index + 1);
      }
    }, SMOOTH_OUT_DELAY);
  }, [value, index]);

  return (
    <pre>
      {value.slice(0, index)} {isPending && <div className="indicator" />}
    </pre>
  );
}

This simple component solves the following problems for us.

1 - It renders one character in value prop every 50ms. Because this component is rendered in the same position in the UI tree, the state index is preserved, so it will get incremented until it’s at the end of current fetched content.

2 - It continues rendering new content even after a long pause from server. Imagine a scenario where server sends “Hello” then waits for 1min before it sends “World”. First, our app will render all chars in “Hello” one by one, then it just waits. When “World” comes in, value prop is updated and passed to Response, so the compnent re-renders and index is incremented again from where it was a min ago.

There’s however one small problem. When user clicks Fetch rapidly multiple times, index state is stale. We need to reset it for each click event. In this case a simple trick does wonder:

<Response
    key={lastClickTimestampRef.current} <!-- LOOK HERE -->
    value={response}
    isPending={isPending}/>

We just use the last click’s timestamp as a key. That will tell React that this is a brand new Response per click, so React resets the state of the component, i.e. the index state.