React Native useEffect works on file save

Question

I am developing a video chat app using react-native-voximplant, everything works, but when the app loads first time, the login functionality is happening inside the useEffect. So, the problem is, when my HomeScreen mounts, the useEffects' should fire and I should get logged in voximplant sdk and now if I tap on call icon, the following is shown in the console:

When HomeScreen mounts:

LOG Client: emit: no handlers for event: AuthResult
LOG Error while trying to login to voximplant:  {"code": 491, "name": "AuthResult", "result": false}
LOG Client: emit: no handlers for event: ConnectionEstablished

Now when I tap on call to make a call:

// after a second...

WARN Possible Unhandled Promise Rejection (id: 0):
"NOT_LOGGED_IN"

Now when I hit save (ctrl+s), I get logged in and now if I make a call, it works! I don't know what I am doing wrong here. Is something wrong with useEffect or I'm doing something wrong?

The HomeScreen code:

import {Voximplant} from 'react-native-voximplant';

const HomeScreen = () => {
  const voximplant = Voximplant.getInstance();

  useEffect(() => {
    const signInToVoximplant = async () => {
      try {
        const fqUsername = '...'; // credentials are correct, don't worry about them.
        const password = '...';
        await voximplant.login(fqUsername, password);
      } catch (error) {
        console.log('Error while trying to login to voximplant: ', error);
      }
    };
    signInToVoximplant();
  }, []);

  useEffect(() => {
    const connect = async () => {
      const status = await voximplant.getClientState();
      if (status === Voximplant.ClientState.DISCONNECTED) {
        await voximplant.connect();
      } else if (status === Voximplant.ClientState.LOGGED_IN) {
        console.log('[INFO] VOXIMPLANT CONNECTED');
        return;
      }
    };
      connect();
    }, []);
  }
  
  return ...

The call will only work if I hit ctrl+s i.e. save the file, otherwise it will throw Unhandled Promise rejection... because it is not logged in, however I have written/provided the login inside the useEffect.

Answer 1

According to your logs, when the application starts, login is failed with 491 error that means that the client is in invalid state. It happens because you invoke login API before the connection the Voximplant Cloud is established (connect API).

When the app is reloaded, native code is not reinitialised (but js does) and actually the client is still connected to the Voximplant Cloud, that's why login is successful the second time.

To fix the issue, you need to change the order of Voximplant SDK API invocation: first call Client.connect API and then Client.login.

It is also better to move connect/login to the a single useEffect.