Re-render causes disconnect

[adambasis]

What kind of problem do you need help?

When I have 2 components (Like in this example: https://www.agora.io/en/blog/agora-react-sdk-build-a-video-conferencing-app-in-minutes/):

1. Parent holding agora client
2. Child using agora client to do a video call

When the parent re-renders, the connection state of the agora client is reset to DISCONNECTED and the user gets disconnected.

What can I do to solve this issue?

Thanks for your help :)

[guoxianzhe]

@DasGandlaf In your case, you should save the client to global state or variable. Or you can use AgoraRTCProvider to share client in your global Component such as <App/>

[adambasis]

Thanks for your answer!

That's how I solved the issue for now, but I don't understand why it is disconnecting in the first place? A re-render should not change anything regarding the connection state.

If this is intended behavior, AFAIK, this might be something that goes against React principles. Hooks should preserve state over re-renders. I might be wrong though.

FYI, there doesn't seem to be an example in your comment, maybe it got cut off.

[hyrious]

When you put AgoraRTC.createClient() in the component, a rerender will create another client instance and the previous one will get disconnected by useJoin.

In React, if you want to presist a value during rerender you can wrap it in a useMemo hook:

-const client = AgoraRTC.createClient()
+const client = useMemo(() => AgoraRTC.createClient(), [])