Getting warning while using useState

Question

I'm trying to make a chatting application using sockets in react. What I'm trying to achive in the given code is a way to ensure that each user who chats in the chat container is represented by a unique color. But im not able to achieve the desired result. I'm relatively new to React.

import React, { useState, useEffect } from 'react';
import { Input } from 'antd';
import { v4 as uuidv4 } from 'uuid';

function Chat({ socket }) {
  const [state, setState] = useState({ message: '', name: 'userName' });
  const [messageList, setMsgList] = useState([]);
  var userList = [{name: 'You', color: 'green'}];

  const handleMessageChange = (e) => {
    setState({ ...state, [e.target.name]: e.target.value });
  };

  useEffect(() => {

    //recieving data from socket
    socket.on('RCV_MSG', (data) => {
      var msgColorIndex;
      var msgColor;
      if (userList.some((e) => e.name == data.userName)) {
        msgColorIndex = userList.map((o) => o.name).indexOf(data.userName);
        msgColor = userList[msgColorIndex].color;

        const newList = messageList.concat({
          id: uuidv4(),
          source: data.userName + ':  ',
          msg: data.content,
          color: msgColor,
        });
        setMsgList(newList);
      } else {
        const newUserList = userList.concat({
          name: data.userName,
          color: '#' + Math.floor(Math.random() * 16777215).toString(16),
        });
        console.log(newUserList);
        userList=newUserList;

        console.log('user list should be updated');
        console.log(userList);

        msgColorIndex = userList.map((o) => o.name).indexOf(data.userName);
        msgColor = userList[msgColorIndex].color;

        const newMsgList = messageList.concat({
          id: uuidv4(),
          source: data.userName,
          msg: data.content,
          color: msgColor,
        });
        setMsgList(newMsgList);
      }
    });
  }, [socket, messageList, userList]);

  // sending msg to socket
  const onMessageSubmit = (e) => {
    e.preventDefault();
    const { name, message } = state;

    const newList = messageList.concat({
      id: uuidv4(),
      source: 'You',
      msg: message,
      color: 'green',
    });
    setMsgList(newList);

    console.log(message);
    console.log(socket);
    socket.emit('SEND_MSG', { content: message }, (data) => {
      console.log(data);
    });
    setState({ message: '', name });
  };

  return (
    <div className='chat-body'>
      <div className='chat-header'>CHAT</div>
      <div className='chat-container' id='chat-container'>
        <ul>
          {messageList.map((item) => (
            <li key={item.id}>
              <div className='chat-row'>
                <div style={{ color: item.color }}>{item.source}</div>
                <div className='chat-spacing'>:</div>
                {item.msg}
              </div>
            </li>
          ))}
        </ul>
      </div>
      <form onSubmit={onMessageSubmit}>
        <div className='chat-input'>
          <Input
            name='message'
            value={state.message}
            onChange={handleMessageChange}
            placeholder='Type here'
          ></Input>
          <button>Send</button>
        </div>
      </form>
    </div>
  );
}

export default Chat;

The msgList is the array whose elements are rendered in the chat container and the userList is the array which keeps track of all the users involved.

Answer 1

I can give some idea

let arrayColor = [  ]

const buildColor = () => { 
   let newColor =  Math.floor(Math.random() * 16777215).toString(16);
   if(!arrayColor.includes(newColor)&&newColor.length===6){
      arrayColor.push(newColor)
      return newColor
   } 
   else{
     return buildColor()
   }
}

in useEffect row 1