Adding Liveblocks to existing useState hooks

Not recommended

Note that this is not the recommended way to build your app. We recommend using conflict-free data types and the useStorage and useMutation hooks, to take full advantage of our features.

You can easily add Liveblocks to an existing useState hook by broadcasting and listening to events.

import { useState } from "react";import { useBroadcastEvent, useEventListener } from "./liveblocks.config";
function useCustomState() {  const [state, setState] = useState();  const broadcast = useBroadcastEvent();
  // Update useState and broadcast an event  const setStateAndBroadcast = (newValue) => {    setState(newValue);    broadcast({ type: "STATE_UPDATE", data: newValue });  };
  // Listen for the broadcast event  useEventListener(({ event }) => {    if (event.type === "STATE_UPDATE") {      setState(event.data);    }  });
  return [state, setStateAndBroadcast];}

Jul 3
How to add version history to your app
Jul 5, 2023
Reauthenticate without reloading the page or losing state

Adding Liveblocks to existing useState hooks

Related guides

How to add version history to your app

Reauthenticate without reloading the page or losing state