Managing complex data structure with React State

The client sends a message to the server

    const sendMessage = (e) => {
        e.preventDefault();

        const payload = {
            date: new Date().toISOString(),
            message: inputBuffer,
        }
        
        if (inputBuffer && inputBuffer.trim() !== '')
            socket.emit("sendMessage", payload);
        
        setInputBuffer("");
    }

The server receives the message and adds on the socket id and emits it to admins

    io.on("connection", (socket) => {
        console.log("CONNECTION");
        socket.on("sendMessage", (args) => {
            args["socket_id"] = socket.id;
            adminNS.to("adminRoom").emit("clientMessage", args)
        })
    });

The object being emitted now looks like

{
  date: '2023-08-08T19:32:11.999Z',
  message: 'abc',
  socket_id: 'G6e2gUJ5ExZzTaIlAAEP'
}

The Admin panel on the client listens for this

    useEffect(() => {

        socketRef.current = io("/admin", {
            autoConnect: false,
            auth: {
                token: token
            }
        });
        socketRef.current.connect();

        socketRef.current.on("clientMessage", args => {
            setChats(chats => {
                const client = args.socket_id;
                let currentObj = chats;
                if (!currentObj[client]) {
                    currentObj[client] = [];
                    currentObj[client].messages = [];
                }
                    let newMessages = [];
                    newMessages.messages = currentObj[client].messages;
                    newMessages.messages.push(args.message);
                    currentObj[client] = newMessages;
                    return [currentObj];
            });
        })

        return () => {
            socketRef.current.removeEventListener("clientMessage");
        }

    }, [])

My setChats call currently outlines how I want the object to look
This setter is appending args.message into each messages array at chats[args.socket_id] every update

[
G6e2gUJ5ExZzTaIlAAEP: {
  messages: [
               "User1Message here", "SecondMessage"
            ]
},

socket_id2: {
  message: [
               "User2Message here"
           ]
}
]

The problem is (I think), the setChat callback function is not "pure" and as such isn't working.

Once I have this achieved this data structure I can just iterate through the keys and their associated messages / array, and the end goal is to have many chat windows with the different client chats.

My question is, how can I form a "complex" object structure like this? Maybe I'm overcomplicating the matter and should have seperate state variables and associate them iteratively via a loop in the return portion of the component, but a key - toManyValues relationship seems like the most straight forward.

I have asked around and redux has been mentioned as a solution, or react query. But can this really not be achieved natively? I'd like to know what I'm missing here

You are mutating chats, don't do that -

socketRef.current.on("clientMessage", args => {
    setChats(chats => {
        const client = args.socket_id;
        return {
            ...chats,
            [client]: {
                ...(chats?.[client] ?? {}),
                messages: [
                    ...(chats?.[client]?.messages ?? []),
                    args.message,
                ],
            },
        }
     })
})

A bit of a nightmare? That's why projects like ImmutableJS and others exist.

Another recommendation would be to flatten your state. useState is cheap -

type ClientId = number

type Message = string

type Client = {
    id: ClientId
    name: string
}

const [clients, setClients] = useState<Map<ClientId, Client>>(() => new Map())

const [messages, setMessages] = useState<Map<ClientId, Array<Message>>>(() => new Map())

socketRef.current.on("clientMessage", args => {
    setMessages(msgs => {
        const client = args.socket_id
        return new Map(msgs).set(
            client,
            (next.get(client) ?? [])
                .concat([args.message])
        )
    })
})

Without TypeScript -

const [clients, setClients] = useState(() => new Map())

const [messages, setMessages] = useState(() => new Map())

socketRef.current.on("clientMessage", args => {
    setMessages(msgs => {
        const client = args.socket_id
        return new Map(msgs).set(
            client,
            (next.get(client) ?? [])
                .concat([args.message])
        )
    })
})