API Reference

leaf wraps a component and uses exact render boundaries to track reads of Tilia proxies during rendering.

When tracked keys change, the wrapped component re-renders. The API is equivalent to a higher-order component and is preferred over useTilia for React integration.

See the React overview and useComputed.

import { leaf } from "@tilia/react";

const Counter = leaf(() => {
  return <p>{app.count}</p>;
});

open TiliaReact

@react.component
let make = leaf(() => {
  <p> {app.count->React.int} </p>
})

useTilia enables reactive tracking for a component's current render. Call it at the top of the component.

Reads of Tilia proxies during rendering become dependencies. When one of those dependencies changes, the component re-renders. useTilia is the hook form; leaf is the preferred wrapper when possible.

See the React overview and the related useComputed hook.

import { useTilia } from "@tilia/react";

function Counter() {
  useTilia();
  return <p>{app.count}</p>;
}

open TiliaReact

@react.component
let make = () => {
  useTilia()
  <p> {app.count->React.int} </p>
}

useComputed evaluates fn with reactive tracking and returns its result.

The hook compares successive computed results and re-renders when the result changes. This differs from plain render reads, which depend on every tracked key read during rendering.

Use it with useTilia or leaf in React components. See the React overview.

import { useComputed, useTilia } from "@tilia/react";

function TodoRow({ todo }: { todo: { id: string } }) {
  useTilia();
  const selected = useComputed(() => app.selectedId === todo.id);
  return <div className={selected ? "selected" : ""} />;
}

open TiliaReact

@react.component
let make = (~todo) => {
  useTilia()
  let selected = useComputed(() => app.selectedId === todo.id)
  <div className={selected ? "selected" : ""} />
}

make from @tilia/react builds a React integration object (useTilia, useComputed, leaf) from a provided core Tilia context.

Use it with core make when an application needs isolated reactive worlds that do not affect one another.

The package-level exports provide the default-context version; this function provides the context-bound version.

import { make as makeCore } from "tilia";
import { make as makeReact } from "@tilia/react";

const ctx = makeCore();
const reactApi = makeReact(ctx);
void reactApi.useTilia;

let ctx = Tilia.make()
let reactApi = TiliaReact.make(ctx)
ignore(reactApi.useTilia)

The TiliaReact and tilia_react types define the shape of the React API object returned by react make.

It groups useTilia, useComputed, and leaf for a single core context.

See leaf, useTilia, and useComputed.

import { make as makeCore } from "tilia";
import { make as makeReact } from "@tilia/react";
import type { TiliaReact } from "@tilia/react";

const reactApi: TiliaReact = makeReact(makeCore());
void reactApi.leaf;

open TiliaReact

let reactApi: tilia_react = make(Tilia.make())
ignore(reactApi.leaf)