Javascript 多次调用状态对象如何删除最旧的对象

我有个问题。当我在

GroupchatCard

组件中并单击一张卡时，

MessageSide

组件中的chatid会发生变化。并使用相应的

chatid

创建一个新的

UseChat（chatid）

以下场景： 我点击卡片

chatid==1

，然后点击

chatid==2

。问题是

UseChat（）

现在有两个

chatid

。以前的

chatid===1

和新的

chatid===2

。但我总是只想得到最新的

chatid

。所以旧的应该删除。我的问题是，如何才能做到最好，始终只保留最新的对象，而删除旧的对象

群组聊天卡

export const GroupchatCard = ({ chatname, chattext, messagesnumber, time, chatid }) => {
    const history = useHistory()

    const callChat = () => {
        localStorage.setItem('currentRoomName', chatname)
        history.push({
            pathname: `/chat/${chatname}`,
            state: {
                chatname: chatname,
                chatid: chatid
            },
        })
    }
    return (
        ....
    )
}

消息端

function MessageSide(props) {

  const { state } = useLocation();
  const { chatname } = state;
  const { chatid } = state;
  const [initalLoad, setInitalLoad] = useState(false);


  useEffect(()=>{ 
    if(message.length > 0) { 
      setInitalLoad(false)
      scrollToBottom()  
    }
  },[initalLoad]);

  useEffect(()=>{ 
    console.log("Current Chatid", chatid) // This is working, only once
    setInitalLoad(false)
    getChat();
    if(messages.length > 0) {
        setInitalLoad(true)
    }
  },[chatid]);
  
  const { messages, sendMessage2, setInitalMessages } = Usechat(chatid);



  return (
    ...
  );
}

export default MessageSide;

UseChat

const UseChat = (roomId) => {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    socket.on("newChatMessage", (message) => {
      updateMessages(message);
    });
  }, [roomId]);



  const sendMessage2 = (messageBody, timeStamp, chatid) => {
    //console.log("Sende");
    socket.emit("message", {
      body: messageBody,
      timestamp: timeStamp,
      senderId: cookie.load("userData").id,
      roomid: chatid,
    });
  };

  const updateMessages = (message) => {
    if (roomId.toString() === message.roomid) {
      const incomingMessage = {
        ...message,
        id: message.senderId,
        timestamp: message.timestamp,
        chatid: message.roomid
      };
      setMessages((messages) => [...messages.slice(-30), incomingMessage]);
    } else {
    }
  };



;
};

export default UseChat;