[useCurrentUser] data never arrives for a postponed usage

[TiagoJacobs]

Let's say we have two components, mounted at same time:

function SecondComponent (props:PluginProps):React.ReactElement<PluginProps> {
  const pluginApi: PluginApi = BbbPluginSdk.getPluginApi(props.pluginUuid);
  const currentUser = pluginApi.useCurrentUser();

  useEffect ( () => {
    console.log("User data in second component: ", JSON.stringify(currentUser?.data));
  }, [
    JSON.stringify(currentUser?.data)
  ]);

  return <></>;
}

export default function MainPluginComponent (props:PluginProps):React.ReactElement<PluginProps> {
  BbbPluginSdk.initialize(props.pluginUuid);
  const pluginApi: PluginApi = BbbPluginSdk.getPluginApi(props.pluginUuid);
  const currentUser = pluginApi.useCurrentUser();

  console.log("User data in first component: ", JSON.stringify(currentUser?.data));

  return <>
    <SecondComponent {...props} />
  </>;

Everything works great:

---

However, if the second component is mounted afterwards, like in below code:

function SecondComponent (props:PluginProps):React.ReactElement<PluginProps> {
  const pluginApi: PluginApi = BbbPluginSdk.getPluginApi(props.pluginUuid);
  const currentUser = pluginApi.useCurrentUser();

  useEffect ( () => {
    console.log("User data in second component: ", JSON.stringify(currentUser?.data));
  }, [
    JSON.stringify(currentUser?.data)
  ]);

  return <></>;
}

export default function MainPluginComponent (props:PluginProps):React.ReactElement<PluginProps> {
  BbbPluginSdk.initialize(props.pluginUuid);
  const pluginApi: PluginApi = BbbPluginSdk.getPluginApi(props.pluginUuid);
  const currentUser = pluginApi.useCurrentUser();
  const [displaySecondComponent, setDisplaySecondComponent] = useState(false);
  useEffect( () => {
    setTimeout( () => {
      setDisplaySecondComponent(true);
    }, 2000);
  }, []);

  useEffect ( () => {
    console.log("User data in first component: ", JSON.stringify(currentUser?.data));
  }, [
    JSON.stringify(currentUser?.data)
  ]);

  return <>
  { 
    displaySecondComponent ? 
    <SecondComponent {...props} />
    :null 
  }
  </>;
}

Data never arrives into the second component:

[TiagoJacobs]

Hello @GuiLeme

Can you check if this is still an issue, and if so, try to fix it?

[prlanzarin]

@TiagoJacobs @GuiLeme I can confirm this is still an issue as I've hit it a few times the past couple of weeks.
One is pretty much like the one reported here: same plugin, multiple uses of useCurrentUser. Conditionally rendered components, when mounted late, do not receive the proper information. My workaround was to use the hook only once and feed it to components via a global context.

The other issue, which is more problematic (and not sure if fully related to what's reported here), is that this can happen cross-plugins as well. I think I've seen it happen with custom subscriptions, e.g.:

  const { data: clientSettings } = pluginApi.useCustomSubscription<
    ClientSettingsSubscriptionResultType
  >(PLUGIN_CLIENT_SETTINGS_SUBSCRIPTION);

This, called in two different plugins at different times, will cause the late one to received undefined data. For subscriptions where the data is not available through other means, there's no workaround as this seems to be happening cross-plugins.

[prlanzarin]

FWIW, I think that the useCurrentUser hook is also affected when used in multiple plugins, concurrently. I recommend testing that scenario as well.

[prlanzarin]

One other thing I noticed: changing user roles (e.g.: from participant to mod, taking presenter) causes the hook to start working (transitions from undefined to proper data).