Components

Components are functions that return JSX:

function MyComponent() {
  return <div>Hello World</div>
}

Use them like HTML elements:

function App() {
  return (
    <div>
      <MyComponent />
    </div>
  )
}

Component names must start with a capital letter.

Component Lifecycle

Components run once. After that, reactivity handles all updates:

function Counter() {
  const count = reactive(0)

  console.log('mounted') // runs once

  return <button on-click={() => count.do(v => v + 1)}>Count: {count()}</button>
}

import { reactive } from 'hydroxide';

function Example() {
  const count = reactive(0);

  function increment() {
    count.set(count() + 1);
  }

  // open the console to see the logs
  // when state is updated, component does not re-render
  console.log('No renders!')

  return (
    <button on-click={increment} class="primary-button">
      count is {count()}
    </button>
  );
}

export default Example;

Props

You can pass data to components from parent components using props. If the value passed from parent is a reactive value, the child will automatically update when the value changes.

function App() {
  return (
    <div class="container">
      <Welcome name="Alice" />
      <Welcome name="Bob" />
      <Welcome name="Charlie" />
    </div>
  );
}

function Welcome(props) {
  return <p >Hello, {props.name}!</p>;
}


export default App;

Don't destructure props

Props must be accessed as props.<propertyName>. Destructuring breaks reactivity because it captures values at component initialization, before updates occur.

// ❌ Won't update
function Display({ count }) {
  return <p>{count}</p>
}

// ✅ Will update
function Display(props) {
  return <p>{props.count}</p>
}

Children

You can pass children to components using the children prop. It must be a single element. Multiple elements must be wrapped in a single parent element.

function Card(props) {
  return (
    <div class="card">
      {props.children}
    </div>
  );
}

function App() {
  return (
    <Card>
      <div>
        <h2>My Card</h2>
        <p>This content is passed as children</p>
      </div>
    </Card>
  );
}

export default App;

Dynamic Props

When a reactive value is used in the expression when passing a prop, a binding is created. Wherever that prop is used in child component, it will automatically update when the reactive value changes.

import { reactive } from 'hydroxide';

function Display(props) {
  return <p class="count">Count: {props.count}</p>;
}

function App() {
  const count = reactive(0);

  function increment() {
    count.set(count() + 1);
  }

  return (
    <div class="container">
      <Display count={count()} />
      <button class="primary-button" on-click={increment}>
        Increment
      </button>
    </div>
  );
}

export default App;

Component Lifecycle

Props

Children

Dynamic Props

On this page