Upgrading – Upgrading to 1.5

There’s a small breaking changes in this update, as we’re introducing a better API to enter and leave rooms. If you’re calling client.enter() or client.leave() in your application, or using our Zustand or Redux packages, we recommend you read on.

How to upgrade?

You can upgrade to 1.5 by downloading the latest version of each Liveblocks package you’re using, for example in a React app:

$npm install @liveblocks/client@latest @liveblocks/node@latest @liveblocks/react@latest

Recommended: new enter/leave API

Until now, the API to manually enter a Room using the client looked like the following:

// ❌ We recommend you stop using this APIconst room = client.enter("my-room", options);
// Then later, when unmountingclient.leave("my-room");

These APIs will remain supported and unchanged, but starting with Liveblocks 1.5, there is a new preferred API, which we recommend you switch to:

// ✅ Prefer this API insteadconst { room, leave } = client.enterRoom("my-room", options);
// Then later, when unmountingleave();

We’ve changed this API to return a new “leave” function every time a room reference is requested. This allows sharing the same room connection with two or more parts of your application, without those parts competing for control of the room connection. The room connection will only be terminated after every leave function has been called.

This enables more advanced use cases such as supporting multiple RoomProvider instances for the same room ID, in different parts of your application, or using our React package for one part of your application, while using a Zustand store for another.

Upgrading for Zustand users

If you’re using our Zustand package, there’s a breaking change—you no longer need to pass the room ID to leave the room:

const {  liveblocks: { leaveRoom },} = useStore();
// ❌ BeforeleaveRoom("my-room-name");
// ✅ AfterleaveRoom();

Upgrading for Redux users

If you’re using our Redux package, there’s a similar breaking change—you no longer need to pass the room ID to leave the room:

const dispatch = useDispatch();
// ❌ Beforedispatch(actions.leaveRoom("my-room-name"));
// ✅ Afterdispatch(actions.leaveRoom());