Getting Started with Preact

Start by installing the Preact renderer into your app.

Using Starbeam

tsx
import { createCell } from "@starbeam/preact";
import { render, type JSX } from "preact";
 
export function Counter(): JSX.Element {
  const counter = createCell(0);
 
  return (
    <div>
      <button onClick={() => counter.update((c) => c + 1)}>
        ++
      </button>
      <p>{counter.current}</p>
    </div>
  );
}
 
render(<Counter />, document.querySelector("#root")!);

tsx
import { createCell } from "@starbeam/preact";
import { render, type JSX } from "preact";
 
export function Counter(): JSX.Element {
  const counter = createCell(0);
 
  return (
    <div>
      <button onClick={() => counter.update((c) => c + 1)}>
        ++
      </button>
      <p>{counter.current}</p>
    </div>
  );
}
 
render(<Counter />, document.querySelector("#root")!);

tsx
import { createCell } from "@starbeam/preact";
import { render } from "preact";
 
export function Counter() {
  const counter = createCell(0);
 
  return (
    <div>
      <button onClick={() => counter.update((c) => c + 1)}>
        ++
      </button>
      <p>{counter.current}</p>
    </div>
  );
}
 
render(<Counter />, document.querySelector("#root"));

tsx
import { createCell } from "@starbeam/preact";
import { render } from "preact";
 
export function Counter() {
  const counter = createCell(0);
 
  return (
    <div>
      <button onClick={() => counter.update((c) => c + 1)}>
        ++
      </button>
      <p>{counter.current}</p>
    </div>
  );
}
 
render(<Counter />, document.querySelector("#root"));

This is the most basic way to use Starbeam in a Preact app.

The `use` Hook

The @starbeam/preact renderer also includes a use hook, which allows you to attach Starbeam resources into a Preact app. Resources are instantiated when the component is mounted, and cleaned up when the component is unmounted.

To get an idea for how it works, we'll integrate the Stopwatch resource from the Guides section into Preact.

As a quick refresher, here's what the resource looks like:

tsx
import {
  Cell,
  Formula,
  Resource,
} from "@starbeam/universal";
 
const Stopwatch = Resource(({ on }) => {
  const time = Cell(new Date());
 
  const interval = setInterval(() => {
    time.set(new Date());
  });
 
  on.cleanup(() => {
    return () => clearInterval(interval);
  });
 
  return Formula(() => {
    const now = time.current;
 
    return new Intl.DateTimeFormat("en-US", {
      hour: "numeric",
      minute: "numeric",
      second: "numeric",
      hour12: false,
    }).format(now);
  });
});

tsx
import {
  Cell,
  Formula,
  Resource,
} from "@starbeam/universal";
 
const Stopwatch = Resource(({ on }) => {
  const time = Cell(new Date());
 
  const interval = setInterval(() => {
    time.set(new Date());
  });
 
  on.cleanup(() => {
    return () => clearInterval(interval);
  });
 
  return Formula(() => {
    const now = time.current;
 
    return new Intl.DateTimeFormat("en-US", {
      hour: "numeric",
      minute: "numeric",
      second: "numeric",
      hour12: false,
    }).format(now);
  });
});

The resource creates a cell that holds the current date, but waits to set up the interval until the component that uses the resource is mounted.

Once the component is mounted, the resource creates an timer that will update the time cell once per second. It also specifies a cleanup function that will run when the component that uses the resource is unmounted.

Next, we'll use the use hook to integrate it into a Preact component.

tsx
import { use } from "@starbeam/preact";
 
export const Clock = () => {
  const time = use(Stopwatch);
 
  return <div>{time ?? "now"}</div>;
};

tsx
import { use } from "@starbeam/preact";
 
export const Clock = () => {
  const time = use(Stopwatch);
 
  return <div>{time ?? "now"}</div>;
};

The use hook constructs the resource for us and integrates it into the component's lifecycle. That's the magic of Starbeam resources: they're written without any special knowledge of the quirks of any particular framework, but they can be deeply integrated into any framework.

Getting Started with Preact ​

Using Starbeam ​

The use Hook ​

Getting Started with Preact

Using Starbeam

The `use` Hook