react-best-practices

# React Best Practices Use this skill to apply Vercel Engineering's React and Next.js performance rules without loading the full 70-rule guide up front. For this repository, treat React 19 + Vite + Tauri as the default app context. Next.js, RSC, and server-action rules apply only when editing Next.js code or reference projects. ## Workflow 1. Classify the task by performance surface. 2. Read only the matching rule files under `references/rules`. 3. Apply the smallest code change that matches the rule and the local code style. 4. Verify with the nearest test, typecheck, build, or browser check. Do not apply rules mechanically. Prefer evidence from the current component, data flow, and user interaction path. ## Rule Groups Read `references/rules/_sections.md` when you need the category index. | Priority | Group | Read When | | --- | --- | --- | | 1 | `async-*` | Removing async waterfalls, parallelizing independent work, delaying awaits until needed | | 2 | `bundle-*` | Reducing client bundle cost, dynamic imports, direct imports, third-party loading | | 3 | `server-*` | Next.js server code, RSC serialization, server caching, server fetch parallelism | | 4 | `client-*` | Client data fetching, SWR-style dedupe, browser storage, global event listeners | | 5 | `rerender-*` | Hooks, props, memoization, derived state, callback stability, frequent updates | | 6 | `rendering-*` | DOM/rendering cost, hydration behavior, content visibility, script/resource hints | | 7 | `js-*` | ...