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.
Use the useRef() React hook instead of useState()
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.
Consider using 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.
Use the 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 useVideoTime() hook.
You should be careful to not use "wall clock" time within your compositions. It's possible that your VCS composition will be rendered in offline mode, i.e. as a batch render job rather than a live video stream. In this case VCS video time may advance at a completely different rate than the value you get from JavaScript time APIs like Date.
Avoid setTimeout() and setInterval()
Additionally, in VCS you should not use setInterval() or 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 useRef. The 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: