Nsryjdtyk

I didn't found any examples about how to fetch data from express server using react with socket.io.

Now i do something like this:
Server.js

io.on('connection', socket => {

  console.log(socket.id)



  socket.on('disconnect', () => {

    console.log(socket.id + ' disconnected')

  })



  socket.on('load settings', () => {

    socket.emit('settings is here', data)

  })

})

React.js

const [socket] = useState(io())

  const [settings, setSettings] = useState(false)



   useEffect(() => {

    try {

      socket.emit('load settings');



      socket.on('settings is here', (data) => {

        // we get settings data and can do something with it

        setSettings(data)

      })

    } catch (error) {

      console.log(error)

    }

  }, )

This looks fine, but there are some things you can improve on, such as disconnecting the socket before unmounting and not making the socket part of state (refer to the code example below).

If you're confused over how to port existing code to hooks, write out the component using classes first, then port part by part to hooks. You could refer to this StackOverflow answer as a cheatsheet.

Using traditional classes, using socket.io looks like:

class App extends React.Component {

  constructor(props) {

    super(props);

    this.socket = io();

  }



  componentDidMount() {

    this.socket.open();

    this.socket.emit('load settings');

    this.socket.on('settings is here', (data) => {

      // we get settings data and can do something with it

      this.setState({

        settings: data,

      })

    });

  }



  componentWillUnmount() {

    this.socket.close();

  }



  render() {

    ...

  }

}

Then you can port the this.socket to use useRef (it doesn't need to be part of state as your render() function doesn't need it. So useRef is a better alternative (although useState is likely to still work).

Port componentDidMount() via using useEffect and passing an empty array as the second argument to make the effect callback only run on mount.

Port componentWillUnmount() via returning a callback function in the useEffect callback which React will call before unmounting.

function App() {

  const { current: socket } = useRef(io());

  const [settings, setSettings] = useState(false);



  useEffect(() => {

    try {

      socket.open();

      socket.emit('load settings');

      socket.on('settings is here', (data) => {

        // we get settings data and can do something with it

        setSettings(data);

      })

    } catch (error) {

      console.log(error);

    }

    // Return a callback to be run before unmount-ing.

    return () => {

      socket.close();

    };

  }, ); // Pass in an empty array to only run on mount.



  return ...;

}