react-best-practices

Name: react-best-practices
Author: jgamaraalv

24installs0forks

How to install react-best-practices?

jgamaraalv/ts-dev-kit/react-best-practices

$npx -y skills add jgamaraalv/ts-dev-kit --skill react-best-practices

Installs into the current project.

Summary

React and Next.js performance patterns. Use when writing, reviewing, or optimizing React components.

Files · 1

View on GitHub

SKILL.md

1	# React & Next.js Performance Patterns
2
3	Performance optimization guide for React and Next.js applications, based on Vercel Engineering practices. 8 categories organized by impact.
4
5	<constraints>
6
7	## When to Apply
8
9	- Writing new React components or Next.js pages
10	- Implementing data fetching (client or server-side)
11	- Reviewing code for performance issues
12	- Optimizing bundle size or load times
13
14	</constraints>
15
16	<references>
17
18	## Quick Reference
19
20	### 1. Async Patterns (CRITICAL)
21
22	[references/async-patterns.md](references/async-patterns.md)
23
24	- Prevent waterfall chains in API routes -- start promises early, await late
25	- Defer await until needed -- move await into branches that use it
26	- Dependency-based parallelization -- `Promise.all()` with `.then()` chaining
27	- Strategic Suspense boundaries -- stream content with `<Suspense>`
28
29	### 2. Bundle Optimization (CRITICAL)
30
31	[references/bundle-optimization.md](references/bundle-optimization.md)
32
33	- Avoid barrel file imports -- import directly from source files
34	- Conditional module loading -- load only when feature is activated
35	- Defer non-critical third-party libraries -- load after hydration
36	- Dynamic imports for heavy components -- `next/dynamic` with `ssr: false`
37	- Preload on user intent -- preload on hover/focus
38
39	### 3. Server-Side Performance (HIGH)
40
41	[references/server-performance.md](references/server-performance.md)
42
43	- `after()` for non-blocking operations -- logging, analytics after response
44	- Authenticate Server Actions -- treat as public endpoints
45	- Cross-request LRU caching -- share data across sequential requests
46	- `React.cache()` deduplication -- per-request with primitive args
47	- Avoid duplicate RSC serialization -- transform in client, not server
48	- Parallel fetching via composition -- restructure component tree
49	- Minimize serialization at boundaries -- pass only needed fields
50
51	### 4. Client-Side Patterns (MEDIUM-HIGH)
52
53	[references/client-patterns.md](references/client-patterns.md)
54
55	- Deduplicate global event listeners -- `useSWRSubscription`
56	- Version and minimize localStorage -- schema versioning, try-catch
57	- Passive event listeners -- `{ passive: true }` for scroll performance
58	- SWR for automatic deduplication -- caching and revalidation
59
60	### 5. Re-render Optimization (MEDIUM)
61
62	[references/rerender-optimization.md](references/rerender-optimization.md)
63
64	- Defer state reads to usage point -- read in callbacks, not render
65	- Narrow effect dependencies -- use primitives, not objects
66	- Derive state during render -- no state + effect for computed values
67	- Functional setState -- stable callbacks, no stale closures
68	- Hoist default non-primitive props -- stable defaults for `memo()`
69	- Extract to memoized components -- skip computation with early returns
70	- Interaction logic in event handlers -- not state + effect
71	- useRef for transient values -- avoid re-render on frequent updates
72
73	### 6. Rendering Performance (MEDIUM)
74
75	[references/rendering-performance.md](references/rendering-performance.md)
76
77	- Animate SVG wrapper -- hardware-accelerated CSS on `<div>`, not `<svg>`
78	- CSS `content-visibility: auto` -- defer off-screen rendering
79	- Hoist static JSX -- extract constants outside components
80	- Prevent hydration mismatch -- inline script for client-only data
81	- `useTransition` over manual loading states -- built-in pending state
82
83	### 7. JavaScript Performance (LOW-MEDIUM)
84
85	[references/js-performance.md](references/js-performance.md)
86
87	- Avoid layout thrashing -- batch DOM reads and writes
88	- Cache repeated function calls -- module-level Map
89	- Cache storage API calls -- in-memory cache for localStorage/cookies
90	- Build index Maps for lookups -- O(1) instead of O(n) `.find()`
91	- Loop for min/max -- O(n) instead of O(n log n) sort
92
93	### 8. Advanced Patterns (LOW)
94
95	[references/advanced-patterns.md](references/advanced-patterns.md)
96
97	- Store event handlers in refs -- stable effect subscriptions
98	- Initialize app once per load -- module-level guard
99
100	</references>

People who liked this also viewed

6 picks

Type

hyperframes-cliUse the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes, single or batch render, publish, cloud, SkillsJul 2026262k37k
request-refactor-planSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026165k181k
analyze-projectRigor Analyze / Rigor Audit read-only skill for deep learning research repositories. Use when the user wants to read and understand a repository, inspect model structure and training or inference entrSkillsMay 2026161k507
explore-codeRigor Improve implementation leaf skill for auditable candidate implementation in deep learning research repositories. Use when the researcher explicitly authorizes exploratory work on an isolated braSkillsMay 2026161k507
ubiquitous-languageSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026160k181k
scaffold-exercisesSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026149k181k

react-best-practices

24installs0forks

View on GitHub

How to install react-best-practices?

jgamaraalv/ts-dev-kit/react-best-practices

$npx -y skills add jgamaraalv/ts-dev-kit --skill react-best-practices

Installs into the current project.

Summary

React and Next.js performance patterns. Use when writing, reviewing, or optimizing React components.

Files · 1

View on GitHub

SKILL.md

1	# React & Next.js Performance Patterns
2
3	Performance optimization guide for React and Next.js applications, based on Vercel Engineering practices. 8 categories organized by impact.
4
5	<constraints>
6
7	## When to Apply
8
9	- Writing new React components or Next.js pages
10	- Implementing data fetching (client or server-side)
11	- Reviewing code for performance issues
12	- Optimizing bundle size or load times
13
14	</constraints>
15
16	<references>
17
18	## Quick Reference
19
20	### 1. Async Patterns (CRITICAL)
21
22	[references/async-patterns.md](references/async-patterns.md)
23
24	- Prevent waterfall chains in API routes -- start promises early, await late
25	- Defer await until needed -- move await into branches that use it
26	- Dependency-based parallelization -- `Promise.all()` with `.then()` chaining
27	- Strategic Suspense boundaries -- stream content with `<Suspense>`
28
29	### 2. Bundle Optimization (CRITICAL)
30
31	[references/bundle-optimization.md](references/bundle-optimization.md)
32
33	- Avoid barrel file imports -- import directly from source files
34	- Conditional module loading -- load only when feature is activated
35	- Defer non-critical third-party libraries -- load after hydration
36	- Dynamic imports for heavy components -- `next/dynamic` with `ssr: false`
37	- Preload on user intent -- preload on hover/focus
38
39	### 3. Server-Side Performance (HIGH)
40
41	[references/server-performance.md](references/server-performance.md)
42
43	- `after()` for non-blocking operations -- logging, analytics after response
44	- Authenticate Server Actions -- treat as public endpoints
45	- Cross-request LRU caching -- share data across sequential requests
46	- `React.cache()` deduplication -- per-request with primitive args
47	- Avoid duplicate RSC serialization -- transform in client, not server
48	- Parallel fetching via composition -- restructure component tree
49	- Minimize serialization at boundaries -- pass only needed fields
50
51	### 4. Client-Side Patterns (MEDIUM-HIGH)
52
53	[references/client-patterns.md](references/client-patterns.md)
54
55	- Deduplicate global event listeners -- `useSWRSubscription`
56	- Version and minimize localStorage -- schema versioning, try-catch
57	- Passive event listeners -- `{ passive: true }` for scroll performance
58	- SWR for automatic deduplication -- caching and revalidation
59
60	### 5. Re-render Optimization (MEDIUM)
61
62	[references/rerender-optimization.md](references/rerender-optimization.md)
63
64	- Defer state reads to usage point -- read in callbacks, not render
65	- Narrow effect dependencies -- use primitives, not objects
66	- Derive state during render -- no state + effect for computed values
67	- Functional setState -- stable callbacks, no stale closures
68	- Hoist default non-primitive props -- stable defaults for `memo()`
69	- Extract to memoized components -- skip computation with early returns
70	- Interaction logic in event handlers -- not state + effect
71	- useRef for transient values -- avoid re-render on frequent updates
72
73	### 6. Rendering Performance (MEDIUM)
74
75	[references/rendering-performance.md](references/rendering-performance.md)
76
77	- Animate SVG wrapper -- hardware-accelerated CSS on `<div>`, not `<svg>`
78	- CSS `content-visibility: auto` -- defer off-screen rendering
79	- Hoist static JSX -- extract constants outside components
80	- Prevent hydration mismatch -- inline script for client-only data
81	- `useTransition` over manual loading states -- built-in pending state
82
83	### 7. JavaScript Performance (LOW-MEDIUM)
84
85	[references/js-performance.md](references/js-performance.md)
86
87	- Avoid layout thrashing -- batch DOM reads and writes
88	- Cache repeated function calls -- module-level Map
89	- Cache storage API calls -- in-memory cache for localStorage/cookies
90	- Build index Maps for lookups -- O(1) instead of O(n) `.find()`
91	- Loop for min/max -- O(n) instead of O(n log n) sort
92
93	### 8. Advanced Patterns (LOW)
94
95	[references/advanced-patterns.md](references/advanced-patterns.md)
96
97	- Store event handlers in refs -- stable effect subscriptions
98	- Initialize app once per load -- module-level guard
99
100	</references>

People who liked this also viewed

6 picks

Type