LiveKit docs › Hooks › useVisualStableUpdate

---

# 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

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

```

## Remarks

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.

## Usage

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

```

## Properties

- **`maxItemsOnPage`** _(number)_: 

- **`trackReferences`** _(TrackReferenceOrPlaceholder[])_: 

- **`options.customSortFunction`** _((trackReferences: TrackReferenceOrPlaceholder[]) => TrackReferenceOrPlaceholder[])_ (optional): Overwrites the default sort function.

## Returns

```typescript
TrackReferenceOrPlaceholder[]

```

---

This document was rendered at 2026-06-07T11:32:07.454Z.
For the latest version of this document, see [https://docs.livekit.io/reference/components/react/hook/usevisualstableupdate.md](https://docs.livekit.io/reference/components/react/hook/usevisualstableupdate.md).

To explore all LiveKit documentation, see [llms.txt](https://docs.livekit.io/llms.txt).