Message duplication and memory leak on socket io in use Effect

Question

Hi i have an issue with socket.io in useEffect if I go back then I come back on my page and I write a message the memory will leak and the messages will be duplicated..

import React, { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
//import socketIOClient from "socket.io-client";
import { io } from "socket.io-client";
import Message from "../../component/Message";
import { getUser } from "../../service/account";
import { getFirebaseUser, getUid } from "../../service/firebase";
const socket = io("localhost:5002", { path: "/api/chat"});

const Chat = () => {
    
    const [inputField,setInputField] = useState("");
    const [messages,setMessages] = useState([]);
    const { expertUid } = useParams();

    useEffect(() => {
        getFirebaseUser().then(async (res) => {
            if (res) {
                socket.emit("join", {
                    from: res.uid,
                    to: expertUid
                });
                socket.on("broadcastClientMessage", data => {
                    setMessages(messages => [...messages,data]);
                });
            }
        });

        return(()=>{
            setMessages([]);
            socket.off("join")
        })
    }, []);

Answer 1

I patched with this :

const [socket, setSocket] = useState(io(null, { path: "/api/chat"}));

    useEffect(() => {
        setSocket(io(URL, { path: "/api/chat"}));
    }, []);


    useEffect(() => {
        getFirebaseUser().then(async (res) => {
            console.log("cc")
            if (res) {
                socket.emit("join", {
                    from: res.uid,
                    to: expertUid
                });
                socket.on("broadcastClientMessage", data => {
                    setMessages(messages => [...messages,data]);
                });
            }
        });

        return(()=>{
            setMessages([]);
            socket.disconnect();
        })
    }, [socket]);