reactlisted

# React Load this file by default for any `.tsx` or `.jsx` task. Pull refs only when the task explicitly requires that depth — see the References section. ## P0 — Hook Correctness - Dependency arrays must be exhaustive (`exhaustive-deps`). Never suppress the linter to silence a warning — fix the logic. - Objects, arrays, and functions in dependency arrays: first move creation inside the effect, hoist constants, or remove the effect. Use `useMemo`/`useCallback` only when identity stability is required or measured work is expensive. - `useEffect` is for syncing with external systems only. Derived data belongs in render; event-specific logic belongs in event handlers. Prefer framework data APIs, route loaders, TanStack Query, or SWR over raw fetch effects when available. - Effects must clean up subscriptions, timers, and event listeners. Use `AbortController` for cancellable fetches and stale-response guards for non-abortable async work. - Never call hooks inside conditions, loops, nested functions, event handlers, class components, callbacks passed to hooks, `try`/`catch`/`finally`, or after a conditional return. - Do not use `useEffect` to sync derived state — compute it during render instead. - Lazy-initialize expensive state: `useState(() => compute())`. - `useMemo` and `useCallback`: measure before adding. React Compiler may reduce manual memoization; keep manual memoization where identity is observable or profiling proves value. - `useRef` for mutable values that must n