createHydrationContext

This version is deprecated

This documentation is for use-less-react v0.x, which has been deprecated.
See v1.0 documentation for the current API.

Builds upon createGenericContext to handle server-to-client hydration of serializable class instances.

---

Overview

createHydrationContext provides two nested contexts:

• One for passing dehydrated data (serialized) from server to client
• Another for hydrating instances and sharing them to client components

---

Example

1. Define a serializable class

import { SerializableClass, PubSub, Notifies } from '@dxbox/use-less-react/classes';

@SerializableClass()
export class Sprite extends PubSub {
  static readonly serialName: string = 'Sprite';

  constructor(private x: number, private y: number) {
    super();
  }

  get position() {
    return { x: this.x, y: this.y };
  }

  @Notifies('position')
  setPosition(x: number, y: number) {
    this.x = x;
    this.y = y;
  }

  static hydrate(obj: object): Sprite {
    if ('x' in obj && 'y' in obj) {
      return new Sprite(obj.x as number, obj.y as number);
    }
    throw new Error('invalid params');
  }

  dehydrate(): object {
    return { x: this.x, y: this.y };
  }
}

2. Register the class

// serializable-classes-registry.ts
export const serializableClassesRegistry: SerializableClassesRegistry = {
  [Sprite.serialName]: Sprite,
};

3. Create the hydration context

import { createHydrationContext } from '@dxbox/use-less-react/client';

export const [HomepageHydrationProvider, useHomepageHydratedInstances] =
  createHydrationContext<HomepageHydratedProps>(serializableClassesRegistry);

4. Use on server side

// page.ts (server side)
import { dehydrateInstances } from '@dxbox/use-less-react/classes';

function Homepage() {
  const playerSprite = new Sprite(5, 5);
  const value: HomepageHydratedProps = { playerSprite };

  return (
    <HomepageHydrationProvider dehydratedData={dehydrateInstances(value)}>
      <HomepageClientSideComponent />
    </HomepageHydrationProvider>
  );
}

5. Use on client side

// client-component.tsx
function HomepageClientSideComponent() {
  const { playerSprite } = useHomepageHydratedInstances();

  const { state: position } = useReactiveInstance(
    playerSprite,
    (s) => s.position,
    ['position'],
  );

  return <div>Position: {position.x}, {position.y}</div>;
}

---

Migration: See v1.0 createHydrationContext for the modern equivalent.