使用socket.io和useEffect会导致延迟，我添加到数组的次数越多？

import { useEffect, useState } from 'react';
import io from 'socket.io-client';

const socket = io('http://your-socket-server.com');

function MyComponent() {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    const handleMessage = (message) => {
      setMessages((prevMessages) => [...prevMessages, message]);
    };

    const debouncedHandleMessage = debounce(handleMessage, 100);

    socket.on('message', debouncedHandleMessage);

    return () => {
      socket.off('message', debouncedHandleMessage);
    };
  }, []);

  return (
    <div>
      {messages.map((message, index) => (
        <div key={index}>{message}</div>
      ))}
    </div>
  );
}

function debounce(func, wait) {
  let timeout;
  return function (...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), wait);
  };
}

useEffect(() => {
  const handleMessage = (message) => {
    setMessages((prevMessages) => [...prevMessages, message]);
  };

  socket.on('message', handleMessage);

  return () => {
    socket.off('message', handleMessage);
  };
}, []);

import { useEffect, useReducer } from 'react';
import io from 'socket.io-client';

const socket = io('http://your-socket-server.com');

function messageReducer(state, action) {
  switch (action.type) {
    case 'ADD_MESSAGE':
      return [...state, action.payload];
    default:
      return state;
  }
}

function MyComponent() {
  const [messages, dispatch] = useReducer(messageReducer, []);

  useEffect(() => {
    const handleMessage = (message) => {
      dispatch({ type: 'ADD_MESSAGE', payload: message });
    };

    socket.on('message', handleMessage);

    return () => {
      socket.off('message', handleMessage);
    };
  }, []);

  return (
    <div>
      {messages.map((message, index) => (
        <div key={index}>{message}</div>
      ))}
    </div>
  );
}