React best practices for 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.
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.
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.
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
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: