> ## Documentation Index
> Fetch the complete documentation index at: https://docs.daily.co/llms.txt
> Use this file to discover all available pages before exploring further.

# VCS best practices

> Developers can use Daily's VCS SDK to build custom video layouts and add graphics to live streamed and recorded video calls.

<Badge color="blue">Paid plans only</Badge>

<Note>
  **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.
</Note>

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`](https://reactjs.org/docs/hooks-state.html) 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`](https://reactjs.org/docs/hooks-reference.html#useref) instead, which lets you store data specific to a component instance without triggering re-renders.

<Tip>
  Custom components built in the VCS SDK should have performance benefits by using the [`React.useRef`](https://reactjs.org/docs/hooks-reference.html#useref) hooks instead of [`React.useState`](https://reactjs.org/docs/hooks-state.html). The frame rate of the video feed will be more even when re-renders are avoided.
</Tip>

## 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()`](/docs/vcs/custom-react-hooks/use-video-time) 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`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date).

## Avoid `setTimeout()` and `setInterval()`

Additionally, in VCS you should not use [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/setInterval) or [`setTimeout()`](https://developer.mozilla.org/en-US/docs/Web/API/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](https://github.com/daily-co/daily-vcs/blob/main/compositions/daily-baseline/components/Toast.js) 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:

* [Core concepts](/docs/vcs/core-concepts)
* [Composition file structure & interface](/docs/vcs/core-concepts/composition)
* [Input and compositing models](/docs/vcs/core-concepts/input-and-compositing-models)