Async Generator Stream Processing into Array State Buffers

import React, { useState, useEffect } from 'react';
 
async function* fetchChunkStream(url) {
  const response = await fetch(url);
  const reader = response.body.getReader();
  const decoder = new TextDecoder();
  
  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    yield decoder.decode(value).trim().split('\n');
  }
}
 
export function StreamDataViewer({ endpoint }) {
  const [dataLines, setDataLines] = useState([]);
 
  useEffect(() => {
    let active = true;
    async function consumeStream() {
      for await (const chunkArray of fetchChunkStream(endpoint)) {
        if (!active) break;
        setDataLines(prev => prev.concat(chunkArray));
      }
    }
    consumeStream();
    return () => { active = false; };
  }, [endpoint]);
 
  return <ul>{dataLines.map((line, i) => <li key={i}>{line}</li>)}</ul>;
}