How to await data from redux store before firing useEffect hook?

Question

I am currently working on an app that is using React, Redux, and Socket.io. When the user signs in and goes to the messaging page, the socket and room are created just like it should. However, when I click refresh, it seems like my useEffect function is firing before it receives the data from the redux store which the function set up the socket and room correctly. Has anyone ever had an issue like this? And if so how do you fix it? Thanks in advance

Edit: Just tried using a setTimeout() and still producing the same results. I am at a loss. Any help would be appreciated

Here is the code:

import Sidebar from './Sidebar';
import { Container, Col, Row, Card } from 'react-bootstrap';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { receiveMessage } from '../../actions/conversation';
//Socket.IO import
import io from 'socket.io-client';

const Messenger = ({ auth, receiveMessage }) => {
  const [socket, setSocket] = useState(null);

  const setupSocket = () => {
    const id = auth.userNumber;
    console.log('fdhsafidhsafkdjsafhdusafhdsafidgsafdusa', id);
    if (!socket) {
      const newSocket = io('http://localhost:5000', {
        query: {
          id: id,
        },
      });

      newSocket.on('disconnect', () => {
        setSocket(null);
        setTimeout(setupSocket, 3000);
      });

      newSocket.on('receive-message', (message) => {
        console.log('socket.io-client message', message);
        receiveMessage(message);
      });
    }
    // return () => newSocket.close();
  };

  useEffect(async () => {
    await setupSocket();   <=== Problem is here
  }, []);
return (
    <div>
      <Sidebar />
    </div>
  );
};

Messenger.propTypes = {
  auth: PropTypes.object.isRequired,
  receiveMessage: PropTypes.func.isRequired,
};

const mapStateToProps = (state) => ({
  auth: state.auth,
});

export default connect(mapStateToProps, { receiveMessage })(Messenger);```

`useEffect(() => { if (auth === 'SUCCESSFUL') { setupSocket() }}, [auth])` Now this effect will run whenever `auth` is changed. The comparision with `SUCCESSFUL` is just an example to show you that you may need to do a check like that as well. — Ajeet Shah, Mar 22 '21 at 03:48
And i think you can store `socket` in a ref variable: `const [socket, setSocket] = useRef(null)` and use it `socket.current` and set it `socket.current = SOME_NEW_VALUE`. [This post](https://stackoverflow.com/a/66626493/2873538) has more details on `useRef`. — Ajeet Shah, Mar 22 '21 at 03:51
@AjeetShah You mixed up useState with useRef, it should be: `const socket = useRef(null)` — HMR, Mar 22 '21 at 08:32
Your code does `await setupSocket();` but what are you trying to wait for, your code doesn't do anything after that. — HMR, Mar 22 '21 at 08:36

score 0 · Accepted Answer · answered Mar 23 '21 at 13:29

0

Turns out sockets, by nature, are destroyed on refreshes. Go here to learn more: Keep WebSocket connection alive after refresh

answered Mar 23 '21 at 13:29

Joe P

63
1
8

How to await data from redux store before firing useEffect hook?

1 Answers1