monorepo-template / frontend

---
description: "React 19 SPA invariants - client-only, no fetch in useEffect, Compiler memo policy"
alwaysApply: false
globs: apps/front-*/src/**/*.{ts,tsx}
---

# React (19) Component & Hook Rules

These apps are **client-only Vite SPAs** - no SSR, no React Server Components, no `"use server"`. Ignore general React guidance framed around those. For a targeted performance audit load **`vercel-react-best-practices`** (browser/client guidance only).

## Split of concerns

- **Server/async state** → [tanstack-query.mdc](tanstack-query.mdc). **Never** fetch in `useEffect`.
- **Routing / URL state** → [tanstack-router.mdc](tanstack-router.mdc).
- **Vite, providers, env, splitting** → [frontend-architecture.mdc](frontend-architecture.mdc).
- Naming → [naming.mdc](../quality/naming.mdc); lint → [code-style.mdc](../quality/code-style.mdc).

## Repo invariants

- Never define a component (or `memo`/`lazy` wrapper) inside another component's body - hoist to module scope.
- Prefer deriving during render over syncing props/state in `useEffect`. Effects only for external sync; clean up on unmount.
- **React Compiler on** (see frontend-architecture): do **not** default to `useMemo`/`useCallback`/`memo`. Escape hatch only when needed.
- Prefer `useTransition` / `startTransition` / `useDeferredValue` for non-urgent or expensive UI work.
- List keys: stable identity (`item.id`), not index when order can change.
- React 19: `ref` is a normal prop (no new `forwardRef`). `use()` only with a stable cached promise under `<Suspense>` - never `use(fetch(...))` created during render.
- Error boundaries at tree/lazy route edges; route errors via router's `errorComponent`. a11y partly linted (`jsx-a11y` on `apps/front-*/src/**`).