React

LongLink supplies these React functions directly in Views, without imports or a React. prefix. Call hooks at the top level of a component, never inside conditions or loops.

longlink docs --component "React"

React [Runtime]
Props and types
declare function createElement(type: unknown, props: unknown, ...children: ViewNode[]): React.JSX.Element;
declare const Fragment: ViewComponent<{
    key?: string | number;
}>;
declare function useState<T = undefined>(initial?: T | (() => T)): [T, (value: T | ((previous: T) => T)) => void];
declare function useEffect(effect: () => void | (() => void), dependencies?: readonly unknown[]): void;
declare function useMemo<T>(factory: () => T, dependencies: readonly unknown[]): T;
declare function useRef<T>(initial: T): { current: T };

Functions

Function	Usage
useState(initial)	Returns the current state and a setter. Pass a value or an initializer function; updates can use the previous state.
useEffect(effect, dependencies)	Synchronizes with external systems after rendering. Return a cleanup function to release timers or subscriptions. Include every reactive value used by the effect in its dependencies.
useMemo(factory, dependencies)	Caches a calculated value until its dependencies change. Use it for expensive calculations, not required application state.
useRef(initial)	Returns a stable object with a mutable current property. Changing current does not trigger a render.

Fragment groups children without adding a DOM wrapper. Use the JSX shorthand <>…</> or <Fragment key={id}>…</Fragment> when a key is needed.

Example usage

This View stores a counter in local state. The setter receives the previous value so each click increments it safely.

Count: 0

counter.jsx
function Example() {
  const [count, setCount] = useState(0);
  return (
    <Stack gap={3}>
      <Text>Count: {count}</Text>
      <Button
        label="Increment"
        onClick={() => setCount((previous) => previous + 1)}
      />
    </Stack>
  );
}

React [Runtime] Props and types declare function createElement(type: unknown, props: unknown, ...children: ViewNode[]): React.JSX.Element; declare const Fragment: ViewComponent<{ key?: string | number; }>; declare function useState<T = undefined>(initial?: T | (() => T)): [T, (value: T | ((previous: T) => T)) => void]; declare function useEffect(effect: () => void | (() => void), dependencies?: readonly unknown[]): void; declare function useMemo<T>(factory: () => T, dependencies: readonly unknown[]): T; declare function useRef<T>(initial: T): { current: T };

Functions

Function	Usage
useState(initial)	Returns the current state and a setter. Pass a value or an initializer function; updates can use the previous state.
useEffect(effect, dependencies)	Synchronizes with external systems after rendering. Return a cleanup function to release timers or subscriptions. Include every reactive value used by the effect in its dependencies.
useMemo(factory, dependencies)	Caches a calculated value until its dependencies change. Use it for expensive calculations, not required application state.
useRef(initial)	Returns a stable object with a mutable current property. Changing current does not trigger a render.

Fragment groups children without adding a DOM wrapper. Use the JSX shorthand <>…</> or <Fragment key={id}>…</Fragment> when a key is needed.

Example usage

This View stores a counter in local state. The setter receives the previous value so each click increments it safely.

Count: 0

counter.jsx

function Example() { const [count, setCount] = useState(0); return ( <Stack gap={3}> <Text>Count: {count}</Text> <Button label="Increment" onClick={() => setCount((previous) => previous + 1)} /> </Stack> ); }