Хук, как синглтон

Решил использовать RTK Query в проекте. Соответственно, полностью отказался от хранения данных в сторе. Появилась необходимость использования веб-сокетов, написал простой базовый хук. Использую SocketIO. При вызове хука в разных компонентах появляется новый инстанс SocketIO и лишние запросы к серверу с одного клиента. Исправил это следующим образом:

import { useEffect, useState } from 'react'
import { io } from 'socket.io-client'

class SocketInstance {
    static #instance = null
    
    constructor() {
        if(!SocketInstance.#instance) {
            this.s = io('ws://localhost:7979', {
                autoConnect: true
            })
            SocketInstance.#instance = this
        } else {
            return SocketInstance.#instance
        }
    }

    get socket() {
        return this.s
    }
}

const useSocketIO = () => {
    const socket = new SocketInstance().socket
    const [isConnected, setIsConnected] = useState(socket.connected)

    useEffect(() => {
        socket.on('connect', () => setIsConnected(true))
        socket.on('disconnect', () => setIsConnected(false))
    }, [])

    return { isConnected, socket }
}

export default useSocketIO

Насколько правильна данная реализация и как сделать лучше?


Ответы (0 шт):