useVisualStableUpdate
function useVisualStableUpdate(
maxItemsOnPage,
trackReferences,
options?): unknown[];Defined in: packages/react/src/hooks/track/useVisualStableUpdate.ts:38
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
Parameters
| Parameter | Type |
|---|---|
maxItemsOnPage | number |
trackReferences | unknown[] |
options? | UseVisualStableUpdateOptions |
Returns
unknown[]
Example
// Basic — stabilize a page of track references.
const trackRefs = useTracks();
const updatedTrackRefs = useVisualStableUpdate(itemsPerPage, trackRefs);
// Advanced — keep active camera tiles stable in a grid.
function StableCameraGrid() {
const trackRefs = useTracks([{ source: Track.Source.Camera, withPlaceholder: true }]);
const stableTrackRefs = useVisualStableUpdate(6, trackRefs, {
customSortFunction: (refs) => refs,
});
return (
<GridLayout tracks={stableTrackRefs}>
<ParticipantTile />
</GridLayout>
);
}