react-best-practices

Name: react-best-practices
Author: henkisdabro

28installs9forks

How to install react-best-practices?

henkisdabro/wookstar-claude-plugins/react-best-practices

$npx -y skills add henkisdabro/wookstar-claude-plugins --skill react-best-practices

Installs into the current project.

Summary

Comprehensive React and Next.js performance optimisation guide with 40+ rules for eliminating waterfalls, optimising bundles, and improving rendering. Use when optimising React or Next.js apps, reviewing performance, refactoring components, hunting wasteful re-renders, reducing b

Files · 1

View on GitHub

SKILL.md

1	# React Best Practices - Performance Optimisation
2
3	Comprehensive performance optimisation guide for React and Next.js applications with 40+ rules organised by impact level. Designed to help developers eliminate performance bottlenecks and follow best practices.
4
5	## Quick reference
6
7	### Critical priorities
8
9	1. Defer await until needed - Move awaits into branches where they're used
10	2. Use Promise.all() - Parallelize independent async operations
11	3. Avoid barrel imports - Import directly from source files
12	4. Dynamic imports - Lazy-load heavy components
13	5. Strategic Suspense - Stream content while showing layout
14
15	### Common patterns
16
17	Parallel data fetching:
18	```typescript
19	const [user, posts, comments] = await Promise.all([
20	fetchUser(),
21	fetchPosts(),
22	fetchComments()
23	])
24	```
25
26	Direct imports:
27	```tsx
28	// ❌ Loads entire library
29	import { Check } from 'lucide-react'
30
31	// ✅ Loads only what you need
32	import Check from 'lucide-react/dist/esm/icons/check'
33	```
34
35	Dynamic components:
36	```tsx
37	import dynamic from 'next/dynamic'
38
39	const MonacoEditor = dynamic(
40	() => import('./monaco-editor'),
41	{ ssr: false }
42	)
43	```
44
45	## Using the guidelines
46
47	The guidelines live in the references folder at two depths - pick the one that fits the task:
48
49	- [references/react-performance-guidelines.md](references/react-performance-guidelines.md): the complete guide with all rules, code examples, and impact analysis. Read this for a full review or audit.
50	- [references/rules/](references/rules/): one file per rule, named `<category>-<rule>.md` (e.g. `async-parallel.md`, `bundle-barrel-imports.md`). Read individual files when working on a specific problem - the category pointers below map each rule to its file.
51
52	Each rule includes:
53	- Incorrect/correct code comparisons
54	- Specific impact metrics
55	- When to apply the optimisation
56	- Real-world examples
57
58	## Categories overview
59
60	### 1. Eliminating Waterfalls (CRITICAL)
61	Waterfalls are the #1 performance killer. Each sequential await adds full network latency. Rules: `references/rules/async-*.md`
62	- Defer await until needed - [async-defer-await.md](references/rules/async-defer-await.md)
63	- Dependency-based parallelization - [async-dependencies.md](references/rules/async-dependencies.md)
64	- Prevent waterfall chains in API routes - [async-api-routes.md](references/rules/async-api-routes.md)
65	- Promise.all() for independent operations - [async-parallel.md](references/rules/async-parallel.md)
66	- Strategic Suspense boundaries - [async-suspense-boundaries.md](references/rules/async-suspense-boundaries.md)
67
68	### 2. Bundle Size Optimisation (CRITICAL)
69	Reducing initial bundle size improves Time to Interactive and Largest Contentful Paint. Rules: `references/rules/bundle-*.md`
70	- Avoid barrel file imports - [bundle-barrel-imports.md](references/rules/bundle-barrel-imports.md)
71	- Conditional module loading - [bundle-conditional.md](references/rules/bundle-conditional.md)
72	- Defer non-critical third-party libraries - [bundle-defer-third-party.md](references/rules/bundle-defer-third-party.md)
73	- Dynamic imports for heavy components - [bundle-dynamic-imports.md](references/rules/bundle-dynamic-imports.md)
74	- Preload based on user intent - [bundle-preload.md](references/rules/bundle-preload.md)
75
76	### 3. Server-Side Performance (HIGH)
77	Optimise server-side rendering and data fetching. Rules: `references/rules/server-*.md`
78	- Cross-request LRU caching - [server-cache-lru.md](references/rules/server-cache-lru.md)
79	- Minimize serialization at RSC boundaries - [server-serialization.md](references/rules/server-serialization.md)
80	- Parallel data fetching with component composition - [server-parallel-fetching.md](references/rules/server-parallel-fetching.md)
81	- Per-request deduplication with React.cache() - [server-cache-react.md](references/rules/server-cache-react.md)
82
83	### 4. Client-Side Data Fetching (MEDIUM-HIGH)
84	Automatic deduplication and efficient data fetching patterns. Rules: `references/rules/client-*.md`
85	- Deduplicate global event listeners - [client-event-listeners.md](references/rules/client-event-listeners.md)
86	- Use SWR for automatic deduplication - [client-swr-dedup.md](references/rules/client-swr-dedup.md)
87
88	### 5. Re-render Optimisation (MEDIUM)
89	Reduce unnecessary re-renders to minimize wasted computation. Rules: `references/rules/rerender-*.md`
90	- Defer state reads to usage point - [rerender-defer-reads.md](references/rules/rerender-defer-reads.md)
91	- Extract to

People who liked this also viewed

6 picks

Type

react-best-practices

28installs9forks

View on GitHub

How to install react-best-practices?

henkisdabro/wookstar-claude-plugins/react-best-practices

$npx -y skills add henkisdabro/wookstar-claude-plugins --skill react-best-practices

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# React Best Practices - Performance Optimisation
2
3	Comprehensive performance optimisation guide for React and Next.js applications with 40+ rules organised by impact level. Designed to help developers eliminate performance bottlenecks and follow best practices.
4
5	## Quick reference
6
7	### Critical priorities
8
9	1. Defer await until needed - Move awaits into branches where they're used
10	2. Use Promise.all() - Parallelize independent async operations
11	3. Avoid barrel imports - Import directly from source files
12	4. Dynamic imports - Lazy-load heavy components
13	5. Strategic Suspense - Stream content while showing layout
14
15	### Common patterns
16
17	Parallel data fetching:
18	```typescript
19	const [user, posts, comments] = await Promise.all([
20	fetchUser(),
21	fetchPosts(),
22	fetchComments()
23	])
24	```
25
26	Direct imports:
27	```tsx
28	// ❌ Loads entire library
29	import { Check } from 'lucide-react'
30
31	// ✅ Loads only what you need
32	import Check from 'lucide-react/dist/esm/icons/check'
33	```
34
35	Dynamic components:
36	```tsx
37	import dynamic from 'next/dynamic'
38
39	const MonacoEditor = dynamic(
40	() => import('./monaco-editor'),
41	{ ssr: false }
42	)
43	```
44
45	## Using the guidelines
46
47	The guidelines live in the references folder at two depths - pick the one that fits the task:
48
49	- [references/react-performance-guidelines.md](references/react-performance-guidelines.md): the complete guide with all rules, code examples, and impact analysis. Read this for a full review or audit.
50	- [references/rules/](references/rules/): one file per rule, named `<category>-<rule>.md` (e.g. `async-parallel.md`, `bundle-barrel-imports.md`). Read individual files when working on a specific problem - the category pointers below map each rule to its file.
51
52	Each rule includes:
53	- Incorrect/correct code comparisons
54	- Specific impact metrics
55	- When to apply the optimisation
56	- Real-world examples
57
58	## Categories overview
59
60	### 1. Eliminating Waterfalls (CRITICAL)
61	Waterfalls are the #1 performance killer. Each sequential await adds full network latency. Rules: `references/rules/async-*.md`
62	- Defer await until needed - [async-defer-await.md](references/rules/async-defer-await.md)
63	- Dependency-based parallelization - [async-dependencies.md](references/rules/async-dependencies.md)
64	- Prevent waterfall chains in API routes - [async-api-routes.md](references/rules/async-api-routes.md)
65	- Promise.all() for independent operations - [async-parallel.md](references/rules/async-parallel.md)
66	- Strategic Suspense boundaries - [async-suspense-boundaries.md](references/rules/async-suspense-boundaries.md)
67
68	### 2. Bundle Size Optimisation (CRITICAL)
69	Reducing initial bundle size improves Time to Interactive and Largest Contentful Paint. Rules: `references/rules/bundle-*.md`
70	- Avoid barrel file imports - [bundle-barrel-imports.md](references/rules/bundle-barrel-imports.md)
71	- Conditional module loading - [bundle-conditional.md](references/rules/bundle-conditional.md)
72	- Defer non-critical third-party libraries - [bundle-defer-third-party.md](references/rules/bundle-defer-third-party.md)
73	- Dynamic imports for heavy components - [bundle-dynamic-imports.md](references/rules/bundle-dynamic-imports.md)
74	- Preload based on user intent - [bundle-preload.md](references/rules/bundle-preload.md)
75
76	### 3. Server-Side Performance (HIGH)
77	Optimise server-side rendering and data fetching. Rules: `references/rules/server-*.md`
78	- Cross-request LRU caching - [server-cache-lru.md](references/rules/server-cache-lru.md)
79	- Minimize serialization at RSC boundaries - [server-serialization.md](references/rules/server-serialization.md)
80	- Parallel data fetching with component composition - [server-parallel-fetching.md](references/rules/server-parallel-fetching.md)
81	- Per-request deduplication with React.cache() - [server-cache-react.md](references/rules/server-cache-react.md)
82
83	### 4. Client-Side Data Fetching (MEDIUM-HIGH)
84	Automatic deduplication and efficient data fetching patterns. Rules: `references/rules/client-*.md`
85	- Deduplicate global event listeners - [client-event-listeners.md](references/rules/client-event-listeners.md)
86	- Use SWR for automatic deduplication - [client-swr-dedup.md](references/rules/client-swr-dedup.md)
87
88	### 5. Re-render Optimisation (MEDIUM)
89	Reduce unnecessary re-renders to minimize wasted computation. Rules: `references/rules/rerender-*.md`
90	- Defer state reads to usage point - [rerender-defer-reads.md](references/rules/rerender-defer-reads.md)
91	- Extract to

People who liked this also viewed

6 picks

Type