UnityInstance being lost

[rajputav]

Hi, have been using the react-unity-webgl package for a while now, but have been on version 8.8.0. I'm in the process of updating our code to use version 9.2.1 but am running into an issue. We have a toolbar that sends some messages to Unity that change some renderings. This was working on 8.8.0 and continues to work on first load. However, shortly after load, it seems that the unityInstance is being lost by the library and we see messages like this: Unable to Send Message while Unity is not Instantiated. When I check UNSAFE__unityInstance I see that is null. To clarify, the initial load of the unity instance works properly and I can see that the unityInstance is properly defined on initial load.

Any ideas on what could be causing this?

[jeffreylanters]

Hi. Are you using hooks to keep track of the latest instance of the Unity context? -- If it is possible for you, some code examples would help me narrow down your problem.

[rajputav]

Figured out the issue! I was using useCallback and not updating the onClick Functions appropriately.

 const rotateImage = useCallback(() => {
    if (sendMessage) {
      sendMessage("Engine", "Command");
    } else {
      loggerInstance?.error(
        "Could not find unity instance to send message"
      );
    }
  }, [sendMessage]);

Old version

const htmlToolbar = useCallback(() => {
    return (
      <StyledHTMLToolbarContainer>
        {!props.isTicket && (
          <StyledIcon
            type={ROTATE}
            colorVariant={IconColorVariants.WHITE}
            onClick={rotateImage}
          />
        )}
        <StyledIcon
          type={FULL_SCREEN_ICON}
          colorVariant={IconColorVariants.WHITE}
          onClick={setFullScreen}
        />
      </StyledHTMLToolbarContainer>
    );
  }, [props.isTicket]);

=>
New version

  const htmlToolbar = useCallback(() => {
    return (
      <StyledHTMLToolbarContainer>
        {!props.isTicket && (
          <StyledIcon
            type={ROTATE}
            colorVariant={IconColorVariants.WHITE}
            onClick={rotateImage}
          />
        )}
        <StyledIcon
          type={FULL_SCREEN_ICON}
          colorVariant={IconColorVariants.WHITE}
          onClick={setFullScreen}
        />
      </StyledHTMLToolbarContainer>
    );
  }, [props.isTicket, rotateImage, setFullScreen]); 

[rajputav]

Thanks for your prompt response @jeffreylanters !