react-code

React Code

Write and edit React components, pages, routes, hooks, and forms following project conventions.

Reach for the Platform First

Before installing a package or hand-rolling a primitive, walk this ladder and stop at the first hit:

1. Existing GAIA code, a component, hook, or util already covers it (form inputs → Gate 2).
2. Web platform, a browser API or native element does the job: Intl (dates, numbers, lists, plurals), URL / URLSearchParams, crypto.randomUUID(), structuredClone(), AbortController, native Array / Object methods, <dialog>, modern CSS (:has(), container queries).
3. Already-installed dependency, check package.json before adding a sibling that does the same job. For component/hook traps Claude often hand-rolls (client-only/useHydrated, sse, debounce-fetcher), see the remix-utils decision map at wiki/dependencies/remix-utils.md before reinventing.
4. New dependency, only when 1-3 genuinely fall short; the added weight has to earn its place.
5. Custom code, last resort, kept minimal.

The largest real savings come from Intl over date/number-formatting libraries and native collection methods over lodash/underscore (already enforced by you-dont-need-lodash-underscore). Reaching for the platform replaces a needless dependency or bespoke widget; it never overrides accessibility, input validation, or an existing GAIA component (a wrapper exists for a reason).

Pre-Flight Gates

Most hook bugs come from misidentifying the type of problem being solved. Before writing or editing hooks, run through these gate, it only applies when the relevant pattern is present in your changes.

Gate 1: Hook Check

Before writing useEffect:

1. Can I calculate this during render? → Derive inline or useMemo, no Effect needed.
2. Does this respond to a user action? → Put it in the event handler, no Effect needed.
3. Am I syncing state to other state? → Derive it; remove the redundant state, no Effect needed.
4. Am I notifying a parent of a state change? → Call both setters in the handler, no Effect needed.
5. Do I need to reset child state when a prop changes? → Use key, no Effect needed.
6. Am I synchronizing with an external system (browser API, third-party widget, network)? → Effect is appropriate here. Add cleanup. For data fetching, include an ignore flag.