Zero-Copy Binary Frame Decoding with ArrayBuffer Slices for React Render Loops

import { useState, useCallback } from 'react';
 
function parseHeader(buffer) {
  const view = new DataView(buffer);
  const magic = view.getUint16(0, false);
  const payloadSize = view.getUint32(2, false);
  return { magic, payloadSize };
}
 
export function useBinaryStreamDecoder() {
  const [frames, setFrames] = useState([]);
 
  const processChunk = useCallback((arrayBuffer) => {
    const { magic, payloadSize } = parseHeader(arrayBuffer);
    if (magic !== 0x4147) return;
    const payloadSlice = new Uint8Array(arrayBuffer, 6, payloadSize);
    setFrames(prev => [...prev, Array.from(payloadSlice)]);
  }, []);
 
  return { frames, processChunk };
}