如何使用react-hooks (useEffect)缓冲流式数据，以便能够一次更新另一个组件，从而避免多次重新渲染？

import React, { useState, useEffect } from 'react';

const BufferComponent = () => {
  const [streamData, setStreamData] = useState(null);
  const [buffer, setBuffer] = useState(null);

  useEffect(() => {
    const timer = setInterval(() => {
      if (buffer) {
        setStreamData(buffer);
        setBuffer(null);
      }
    }, 100);

    return () => {
      clearInterval(timer);
    };
  }, [buffer]);

  const handleStreamData = (data) => {
    setBuffer(data);
  };

  return (
    <div>
      <StreamComponent onData={handleStreamData} />
      <DisplayComponent data={streamData} />
    </div>
  );
};

const StreamComponent = ({ onData }) => {
  useEffect(() => {
    // 模拟流式数据的更新
    const timer = setInterval(() => {
      const data = // 从流式数据源获取数据
      onData(data);
    }, 50);

    return () => {
      clearInterval(timer);
    };
  }, [onData]);

  return <div>Stream Component</div>;
};

const DisplayComponent = ({ data }) => {
  return <div>{data}</div>;
};

export default BufferComponent;