CallClient not useable in React? (can not assign to "f" because it is a constant)

Question

Hello!

We currently try to rewrite the hero app in React instead of plain HTML and JS and are running into an issue with the instantiation of the call client.
We tried different solutions to create a new client instance, but it just does not work. Preferably we create a new Instance and store it inside a state variable.

import {
  CallClient,
} from '@azure/communication-calling';

....

const [incomingCall, setIncomingCall] = useState(() => new CallClient());

This results in the following error:

X [ERROR] Cannot assign to "f" because it is a constant

I guess this might because the object is created twice? Does anyone know how to adress or fix that?

Thank you!

Answer 1

Markus Lang Maintaining calling "state" into the React components is extremely problematic. If things are mounted/unmounted you would just lose that data all together. It is easy to accidentally mess up and force a re-render as well which could also impact the state being held in the components.

https://reactjs.org/docs/hooks-effect.html

useEffect is a very strong React hook but it can't just be used anywhere without understanding what is it really for and what does you need to do.

Here the suggestion in production environments to separate out Calling sdk calls from your React components or else you can risk running into scenarios as listed above.

The UI team has run into this type of issue and that is why we have opted to maintain the calling features and where that data lives outside of our react components.

https://github.com/Azure/communication-ui-library/tree/main/packages/calling-stateful-client

Being able to keep our data separate from our UI code means we can mount/unmount components and render/re-render UI without worrying we are going to invoke functions accidentally due to how React's algorithms for determining when components should render

If you are using React. We would like to suggest you try out the web ui library we have built.

https://github.com/Azure/communication-ui-library

You can learn more about the library and how to import it here:

https://www.npmjs.com/package/@azure/communication-react

Hope this helps.