hi i have a react rpoject i use typescript, i create a component and i use d3 js fort showing a chart in that component, so this is my code:
```
import React, { useRef, useEffect } from 'react';
import * as d3 from 'd3';

interface LineChartProps {
  width: number;
  height: number;
  dataSets: Array<{ name: string; data: Array<{ x: number; y: number }> }>;
}

const LineChart: React.FC<LineChartProps> = ({ width, height, dataSets }) => {
  const svgRef = useRef<SVGSVGElement | null>(null);
  const zoomTransformRef = useRef<d3.ZoomTransform>(d3.zoomIdentity);
    console.log('re-render')
  useEffect(() => {
    if (!svgRef.current) return;

    const margin = { top: 20, right: 30, bottom: 50, left: 50 };
    const chartWidth = width - margin.left - margin.right;
    const chartHeight = height - margin.top - margin.bottom;

    // Clear existing svg
    const svg = d3.select(svgRef.current).selectAll("*").remove().node();

    const svgElement = d3.select(svgRef.current)
      .attr('width', width)
      .attr('height', height);

    const defs = svgElement.append('defs');
    defs.append('clipPath')
      .attr('id', 'chartAreaClip')
      .append('rect')
      .attr('width', chartWidth)
      .attr('height', chartHeight);

    const g = svgElement.append('g')
      .attr('transform', `translate(${margin.left},${margin.top})`);

    const xScale = d3.scaleLinear()
      .domain([0, Math.max(...dataSets.flatMap(dataset => dataset.data.map(d => d.x))) || 1])
      .range([0, chartWidth]);

    const yScale = d3.scaleLinear()
      .domain([0, Math.max(...dataSets.flatMap(dataset => dataset.data.map(d => d.y))) || 1])
      .range([chartHeight, 0]);

    const xAxis = d3.axisBottom(xScale).ticks(10);
    const yAxis = d3.axisLeft(yScale).ticks(10);

    const xAxisGroup = g.append('g')
      .attr('class', 'x-axis')
      .attr('transform', `translate(0,${chartHeight})`)
      .call(xAxis);

    const yAxisGroup = g.append('g')
      .attr('class', 'y-axis')
      .call(yAxis);

    const xGridGroup = g.append('g')
      .attr('class', 'x-grid')
      .attr('transform', `translate(0,${chartHeight})`);

    const yGridGroup = g.append('g')
      .attr('class', 'y-grid');

    const chartArea = g.append('g')
      .attr('clip-path', 'url(#chartAreaClip)');

    const colorScale = d3.scaleOrdinal<number, string>(d3.schemeCategory10);

    const renderChart = (xScale: d3.ScaleLinear<number, number>, yScale: d3.ScaleLinear<number, number>, transform: d3.ZoomTransform) => {
      const transformedX = transform.rescaleX(xScale);
      const transformedY = transform.rescaleY(yScale);

      // Render lines
      chartArea.selectAll('.line')
        .data(dataSets)
        .join('path')
        .attr('class', 'line')
        .attr('fill', 'none')
        .attr('stroke', (d, i) => colorScale(i))
        .attr('stroke-width', 2)
        .attr('d', d => d3.line<{ x: number; y: number }>()
          .x(d => transformedX(d.x))
          .y(d => transformedY(d.y))(d.data) || '');

      // Render grids
      xGridGroup.call(
        d3.axisBottom(transformedX)
          .tickSize(-chartHeight)
          .tickFormat(() => '') as any
      ).selectAll('line')
      .style('stroke', '#e0e0e0')

      yGridGroup.call(
        d3.axisLeft(transformedY)
          .tickSize(-chartWidth)
          .tickFormat(() => '') as any
      ).selectAll('line')
      .style('stroke', '#e0e0e0')
    };

    const zoom = d3.zoom<SVGSVGElement, unknown>()
      .scaleExtent([0.5, 10])
      .on('zoom', (event) => {
        zoomTransformRef.current = event.transform;
        renderChart(xScale, yScale, event.transform);
      });

    svgElement.call(zoom);

    // Initial render with persisted zoom transform if available
    renderChart(xScale, yScale, zoomTransformRef.current);

  }, [dataSets, width, height]);

  return <svg ref={svgRef}></svg>;
};

export default LineChart;
```
the data i pass to this component is stream data and keep change all the time , and when data change the component re-render and its very bad for example if my data update 1000 bar in 1 minute my component re-render 1000 time just in a single minute, i want you give me some approach or a solution to avoiding that re-rendering