Socket.io client with React

LiveFeedView.tsx

import React, { useState } from 'react';
import FeatureHeading from '../components/FeatureHeading';
import { io } from 'socket.io-client';
import { useEffect } from 'react';

export default function LiveFeedView() {
  /** Create socket conenction. */

  const [live, setLive] = useState(null);

  useEffect(() => {
    const socket = io('ws://localhost:5000/livefeed');
    socket.on('connect', function () {
      console.log('CONNECTED');
    });
    socket.on('disconnect', function () {
      console.log('DISCONNECTED');
    });
    socket.on('update', function (payload: any) {
      setLive(payload.src);
    });

    /** On component destroy. */
    return () => {
      socket.close();
    };
  }, []);

  return (
    <React.Fragment>
      <FeatureHeading
        title="Live feed"
        description="Live feed description text"
      />
      {live && <img src={`http://localhost:5000/${live}`} alt="live feed" />}
    </React.Fragment>
  );
}