Here’s my component, what happens is I connect to my websocket and listen for incoming messages from the server and display them. Whenever my message list exceeds 10 messages, I slice the first element and add the new one. My array confirmed does not exceed a length of 10 elements, and the data of each message is fairly small.

import React, { useEffect, useState, useRef } from "react";
const ws = new WebSocket("ws://localhost:8000?uid=React");


export default function Discord () {
    const [messages, setMessages] = useState([]);

    ws.addEventListener("message", data => {
        if (messages.length >= 10) {
            setMessages(arr => arr.slice(1,arr.length).concat(JSON.parse(data.data)));
        } else setMessages([...messages, JSON.parse(data.data)]);  
    });
                                        
    return(
        <div class="bg-gray-900 rounded-lg h-full w-full">
            <div class="relative overflow-y-scroll scroll-smooth xl:h-4/5 h-5/6 top-0 w-full">
                <div class="absolute">
                    <MessageList messages={messages}/>
                </div>
            </div>
        </div>
    );
};
function MessageList ({ messages }) {
    const messagesEndRef = useRef(null)
    useEffect(() => {
        messagesEndRef.current.scrollIntoView()
    });
    return (
    <ul class="">
        {messages.map(message => <DiscordMessage messageData={message}/>)}
        <div ref={messagesEndRef}/>
    </ul>
    )
}

I can also confirm that it is this component, as I have removed it and monitored the memory usage and its stable at around 600mb. Whenever I enable this component it climbs up to 6gb then usually just crashes Firefox.

Does the memory issue stem from me rendering components incorrectly?