/react19

name: react19
description: React 19 conventions in ONE sites — client islands, @oneie/react hooks, no useEffect for ONE data. Invoke when editing .tsx components.

React 19 in ONE sites

Islands, not pages

React components are **islands**. A `.tsx` only runs in the browser when an `.astro` mounts it with a directive:

<Counter client:load />     <!-- hydrate immediately -->
<Chart client:visible />    <!-- hydrate when scrolled into view -->

A `.tsx` with no `client:*` directive renders to static HTML — no interactivity.

Use @oneie/react hooks for ONE data

import { useSignal, useMark } from '@oneie/react'

function Likes({ pathId }: { pathId: string }) {
  const strength = useSignal(pathId, 'strength')
  const mark = useMark(pathId)
  return <button onClick={() => mark()}>{strength} ♥</button>
}

Do **not** `useEffect(() => fetch(...))` for ONE data — the hooks own subscription + the closed loop (`mark`/`warn`).

React 19 specifics

• Use Actions / `use()` / transitions for async UI; avoid manual loading-state `useState` ladders.
• Props named `children` are reserved slot content — never use `children` as a data prop on a `client:only` island (it silently renders nothing).

Don't

• Don't fetch ONE data in `useEffect` — use `@oneie/react` hooks.
• Don't ship a `.tsx` expecting interactivity without a `client:*` directive.