State

Ilha uses Signals to make your components reactive. Use the .state() builder method to define state - any property declared here will automatically trigger UI updates when it changes. Pass the property name and its initial value. All state properties are then available inside .render() via the state property.

import "./styles.css";
import ilha, { html, mount } from "ilha";

const Counter = ilha
    .state("count", 0)
    .render(
        ({ state }) => html`
            <p>Count: ${state.count()}</p>
        `
    );

mount({ Counter });

Similar concepts

  • React: useState
  • Vue: reactive()
  • Svelte: $state()