07 · Frontend

Does it work with React — components, hooks, and Context?

React is built in. A component compiles to a React function component, JSX lowers to createElement, custom hooks are just functions — and complex state is safer than plain TypeScript.

Why it matters

A lot of the code agents write is React. Glyph treats it as a first-class target, not a bolt-on: component is its own keyword (so grep "^component " audits your whole UI), and hooks work exactly as you'd expect because they're ordinary function calls.

See it

A custom hook is a function that calls hooks. Reducer state gets something React alone can't give you — compile-time exhaustiveness on every action:

counter.glyph — a custom hook + a reducer that can't miss a case
type Action = Inc | Dec | Reset

fn reducer(n: number, a: Action) -> number {
  return match a {
    Inc => n + 1,
    Dec => n - 1,
    Reset => 0,
    // add an Action variant ⇒ this match fails to compile
  }
}

fn use_counter() -> StateHandle<number> {
  return use_reducer(reducer, 0)
}

Add a SetTo(number) action and every reducer that doesn't handle it stops compiling — the bug a plain TypeScript switch would let ship. React Context works today through createContext / useContext, and member-expression element names (<ThemeContext.Provider>) work directly — no workaround.

The honest edge: a component takes a single props record (not multiple positional params), and some React-library patterns — prop spreading, zod's value-derived types — need a thin adapter today. See using your libraries and the hardening page for exactly where that boundary is.

Where it stands

Shipping today

Components, JSX, fragments (<>...</>), member-expression element names (<Ctx.Provider>), built-in and custom hooks, useReducer with exhaustive tagged-union actions, and Context via createContext/useContext.