Using socket io with ReactJS

App.js

import React from 'react'
import { Provider } from 'react-redux'

import Root from './root'

import { SocketProvider } from './contexts/SocketContext'

const App = () => {
  return (
    <Provider store={store}>
      <SocketProvider store={store}>
        <Root />
      </SocketProvider>
    </Provider>
  )
}

export default App

ChannelButton.js

import React from 'react'

import Button from 'components/Button'

import { useSocket } from './contexts/SocketContext'

const ButtonContainer = ({channelId}) => {

  const socket = useSocket()

  const handlePress = () => {
    socket.emit('join_channel', { channelId })
  }

  return (
    <Button onPress={handlePress}>
     Join Channel
    </Button>
  )
}

export default ButtonContainer

SocketContext.js

import React, {
  createContext,
  useContext,
  useRef,
  useEffect,
  useState,
} from 'react'

import io from 'socket.io-client'

export const SocketContext = createContext()

export const SocketProvider = ({ children, store }) => {
  
  const [isConnected, setConnected] = useState(false)

  const socketUrl = `${process.env.API_URL}/socket.io`

  const socket = useRef(null)

  const handleOnMessage = message => {
    console.log(message)
    // store.dispatch here
  }

  useEffect(() => {
    if (!isConnected) {
      socket.current = io(socketUrl, {
        transports: ['websocket'],
        query: {
          token: localStorage.getItem('auth_token'),
        },
      })

      socket.current.on('connect', () => {
        console.info(`Successfully connected to socket at ${socketUrl}`)
        setConnected(true)
      })

      socket.current.on('disconnect', () => {
        console.info(`Successfully disconnected`)
        setConnected(false)
      })

      socket.current.on('error', err => {
        console.log('Socket Error:', err.message)
      })

      socket.current.on('message', handleOnMessage)
    }

    return () => {
      if (socket.current && socket.current.connected) {
        socket.current.disconnect()
      }
    }
  }, [])

  return (
    <SocketContext.Provider value={socket.current}>
      {children}
    </SocketContext.Provider>
  )
}

export const useSocket = () => useContext(SocketContext)