Getting started—React tutorial

Displaying others

Now that we’re connected to a room, we can start using the Liveblocks hooks. The first we’ll add is useOthers, a hook that provides information about which other users are connected to the room.

Suspense hooks

From this point on, we’ll be using the Suspense version of our hooks and components, which we’ve enabled by adding ClientSideSuspense to App.tsx. To use them, export from @liveblocks/react/suspense.

useOthers

Switch to Room.tsx and import the suspense version of hook—we’ll be building our realtime app in this component.

import { useOthers } from "@liveblocks/react/suspense";

The useOthers hook returns a list of users that are currently online, along with their data. We can access .length to return the current online user count.

// Add useOthersconst others = useOthers();const userCount = others.length;

Add these lines to Room.tsx to see the beginnings of an online app! We’ll be coming back to useOthers again shortly after learning about presence.