react19

What it does and when to use it

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

How it works

1. Islands, not pages
2. Use @oneie/react hooks for ONE data
3. React 19 specifics
4. Don't

---
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:

```astro
<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

```tsx
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.

Versions

The database has no other skills named react19.

Database snapshot: 13.11.2026 · package version f78c4a082e50 (SHA-256 digest of the entire package)

Downloads in the last 30 days: 0 · ranking

Report a problem with this skill: harmful content, incorrect descriptions or an author’s removal request.

Similar skills

• 100react-modern
  Use this skill when writing, reviewing, or debugging React components and hooks — state, effects, data fetching, forms, Server and Client Components — in whatever React setup the project uses. Triggers: user mentions "React", "component", "hook", "useState", "useEffect",…
• 100react
  Develops React and Next.js App Router web applications, components and server rendering. Use when editing .jsx or .tsx components, hooks, Server Components or app/ routes, fixing a hydration mismatch, slow re-renders or bundle size, or adding a shadcn/ui component, including a small useEffect fix.
• 100react-ops
  React development patterns, hooks, state management, Server Components, and performance optimization. Use for: react, hooks, useState, useEffect, jsx, tsx, server components, RSC, zustand, react query, component patterns, react testing library, error boundary, suspense, react 19.
• 100react-best-practices
  Use when reading or writing React components (.tsx, .jsx files with React imports).
• 100react-useeffect
  React useEffect best practices from official docs. Use when writing/reviewing useEffect, useState for derived values, data fetching, or state synchronization. Teaches when NOT to use Effect and better alternatives.
• 100react
  React 18+ framework guardrails, patterns, and best practices for AI-assisted development. Use when working with React projects (.jsx/.tsx files), or when the user mentions React. Provides component patterns, hooks, state management, testing, and performance guidelines.