Components & JSX

Components run once

This is the single most important thing to internalize: a Mikata component function runs once, on mount. Re-running the component on update - the cornerstone of React-style frameworks - is not how Mikata works. Updates happen at the signal level; the JSX sets up reactive bindings once and they drive the DOM from there.

function Counter() {
  const [count, setCount] = signal(0);

  // This console.log runs EXACTLY ONCE, when the component mounts.
  console.log('Counter setup');

  return <button onClick={() => setCount(count() + 1)}>{count()}</button>;
}

This means effects, event handlers, and derived values defined inside the component close over stable references - no stale closures, no dependency arrays.

Control flow

Use show() for conditional branches and each() for lists. They keep the surrounding tree stable and only rebuild the affected subtree when their input signal changes.

import { show, each } from '@mikata/runtime';

function UserList({ users }: { users: () => User[] }) {
  return (
    <div>
      {show(
        () => users().length === 0,
        () => <p>No users</p>,
        () => (
          <ul>
            {each(users, (user) => <li>{user.name}</li>)}
          </ul>
        )
      )}
    </div>
  );
}

No virtual DOM

@mikata/compiler transforms JSX into template strings, cached DOM nodes, and targeted renderEffect bindings for any reactive expression. The generated code looks roughly like this:

<div class="card">{user().name}</div>

// ... compiled to roughly ...

const _el = _template('<div class="card"></div>');
const _node = _el.firstChild;
renderEffect(() => { _node.textContent = user().name; });

The result: no reconciler, no component re-execution, no diffing. Updates touch the one node that actually changed.