React best practices for VCS
VCS is compatible with any frontend framework
Even though VCS is React-based, your app using VCS for Daily live streaming or cloud recording does not need to be built with React.
VCS-based cloud rendering is achieved through the Daily API. This means the VCS code you run in the cloud is by default entirely independent of how your client application is structured. In other words, your web app could be written with Vue, Svelte, or any other framework and still be compatible with VCS.
When building custom components with the VCS SDK, best practices for building React components will differ slightly from what you may be used to while building standard client-side React apps.
The recommendations below specifically apply to VCS components.
Avoid event listeners
A VCS composition is a special kind of React program because it doesn't deal with user events directly. There's no need to attach event listeners on your components. Any user actions will be filtered through the embedding host so that the VCS composition just sees param values being updated.
Instead of events happening at unpredictable times, there's a video playback clock that renders frames at completely regular intervals. If some data isn't available yet within your component, you can simply check again at the next frame in 1/30th of a second. There's less need to manage state with dependency callbacks.
useRef() React hook instead of
For the two reasons mentioned above, the
React.useState hook isn't as useful in VCS as it is in typical interactive client applications. You don't need to update state from event callbacks. Triggering re-renders when state changes may make the single React render cycle take longer, and that makes the overall frame rate more uneven compared to just waiting for the next frame.
React.useRef instead, which lets you store data specific to a component instance without triggering re-renders.
Custom components built in the VCS SDK should have performance benefits by using the
React.useRef hooks instead of
React.useState. The frame rate of the video feed will be more even when re-renders are avoided.
useVideoTime() VCS custom React hook
The current video time is an important data dependency for any VCS component that renders an animation or something that's displayed for a limited time. You can access it with the
Additionally, in VCS you should not use
setTimeout(). This is because they use the wall clock time rather than video time.
A component that needs to wait a specific interval needs to manage this state itself using
Toast component in the baseline composition provides an example of how to achieve this.
Before testing out the VCS SDK, we recommend reading our other
Core concepts pages if you haven't already: