react-best-practices

name

react-best-practices

description

React performance and correctness rules tuned for silkdown — a CodeMirror 6 wrapper library, not a Next.js app. Auto-trigger when editing the React adapter (packages/react/src/SilkdownEditor.tsx, packages/react/src/index.ts), reviewing or refactoring any React component or hook in this repo, optimizing bundle budgets in size-limit, debugging unnecessary re-renders or stale closures around the EditorView, or adding lazy-loaded widgets (math/mermaid/table). Also fires on: "React perf", "useEffect", "memoization", "stale ref", "stale closure", "rerender", "useMemo", "useCallback", "forwardRef", "imperative handle", "bundle size", "tree-shaking", "barrel imports", "React.lazy", "controlled vs uncontrolled".

React Best Practices — silkdown edition

Adapted from Vercel Engineering's React performance guide. Aggressively pruned for this repo:

• Removed: every Next.js / SSR / hydration / RSC / server-action / next/script / next/dynamic rule, every client-swr-* and client-localstorage-* rule, every rendering-* rule (SVG animation, content-visibility, hydration scripts, resource hints, script tags — none of which apply to a CM6 wrapper), and the full js-* micro-optimization category (general perf tips, not React; profile decorate/* hot paths before optimizing them).
• Kept: rules that affect either (a) the React adapter wrapping EditorView, or (b) library bundle budgets enforced by pnpm size.

When to apply

Read these rules when:

• Touching packages/react/src/SilkdownEditor.tsx or any future framework adapter
• Adding lazy-loaded widgets (image/table/code/math/mermaid) — these affect both bundle-* rules and consumer bundle size