useVisualStableUpdate

The useVisualStableUpdate hook is used to prevent visually jarring jumps and shifts of elements in an array. The algorithm only starts to update when there are more items than visually fit on a page. If this is the case, it will make sure that speaking participants move to the first page and are always visible.

import { useVisualStableUpdate } from "@livekit/components-react";

Updating the array can occur because attendees leave or join a room, or because they mute/unmute or start speaking. The hook is used for the GridLayout and CarouselLayout components.

const trackRefs = useTracks();
const updatedTrackRefs = useVisualStableUpdate(trackRefs, itemPerPage);

TrackReferenceOrPlaceholder[]