08 · 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:
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.
JSX prop spreading works too: <input {...register("email")} /> lowers
to an object spread in the props, so the react-hook-form idiom needs no adapter. Zod's
value-derived types are first-class: type FormData = z.infer<typeof schema>
works directly, no escape hatch. The one thing that differs: a component takes a
single props record, not multiple positional params. 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>), JSX prop spread ({...register()}), built-in and custom hooks, useReducer with exhaustive tagged-union actions, and Context via createContext/useContext.
On the way
A Context primitive story for effectful custom hooks that composes with the JSX-purity rule, so more of the React-library surface works without a shim.