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).