Requirements
- Target platform
- OpenClaw
- Install method
- Manual import
- Extraction
- Extract archive
- Prerequisites
- OpenClaw
- Primary doc
- SKILL.md
Tencent SkillHub ยท Developer Tools
React Best Practices
React and Next.js performance optimization guidelines from Vercel Engineering. 57 rules across 8 categories for writing, reviewing, and refactoring React code.
skill openclawclawhub Free
React and Next.js performance optimization guidelines from Vercel Engineering. 57 rules across 8 categories for writing, reviewing, and refactoring React code.
โฌ 0 downloads โ
0 stars Unverified but indexed
Install for OpenClaw
Item is unstable.
This item is timing out or returning errors right now. Review the source page and try again later.
Quick setup
- Wait for the source to recover or retry later.
- Review SKILL.md only after the source returns a real package.
- Do not rely on this source for automated install yet.
Package facts
- Download mode
- Manual review
- Package format
- ZIP package
- Source platform
- Tencent SkillHub
- What's included
- README.md, SKILL.md, AGENTS.md, rules/js-cache-storage.md, rules/bundle-conditional.md, rules/bundle-preload.md
Validation
- Wait for the source to recover or retry later.
- Review SKILL.md only after the download returns a real package.
- Treat this source as transient until the upstream errors clear.
Install with your agent
Agent handoff
Use the source page and any available docs to guide the install because the item is currently unstable or timing out.
- Open the source page via Review source status.
- If you can obtain the package, extract it into a folder your agent can access.
- Paste one of the prompts below and point your agent at the source page and extracted files.
New install
I tried to install a skill package from Yavira, but the item is currently unstable or timing out. Inspect the source page and any extracted docs, then tell me what you can confirm and any manual steps still required. Then review README.md for any prerequisites, environment setup, or post-install checks.
Upgrade existing
I tried to upgrade a skill package from Yavira, but the item is currently unstable or timing out. Compare the source page and any extracted docs with my current installation, then summarize what changed and what manual follow-up I still need. Then review README.md for any prerequisites, environment setup, or post-install checks.
Trust & source
Release facts
- Source
- Tencent SkillHub
- Verification
- Indexed source record
- Version
- 1.0.0
Provenance
- Publisher
- wpank
- Source page
- View original listing
- Canonical URL
- Open canonical page
Documentation
React Best Practices
Comprehensive performance optimization guide for React and Next.js applications from Vercel Engineering. Contains 57 rules across 8 categories, prioritized by impact.
OpenClaw / Moltbot / Clawbot
npx clawhub@latest install react-best-practices
WHAT This Skill Does
Provides actionable rules for: Eliminating request waterfalls Optimizing bundle size Improving server-side performance Efficient client-side data fetching Minimizing re-renders Rendering performance optimizations JavaScript micro-optimizations Advanced patterns for edge cases
WHEN To Use
Writing new React components or Next.js pages Implementing data fetching (client or server-side) Reviewing code for performance issues Refactoring React/Next.js applications Optimizing bundle size or load times Debugging slow renders or waterfalls
KEYWORDS
react performance, nextjs optimization, bundle size, waterfalls, suspense, server components, rsc, rerender, usememo, dynamic import, parallel fetching, cache, swr
Rule Categories by Priority
PriorityCategoryImpactRule Prefix1Eliminating WaterfallsCRITICALasync-2Bundle Size OptimizationCRITICALbundle-3Server-Side PerformanceHIGHserver-4Client-Side Data FetchingMEDIUM-HIGHclient-5Re-render OptimizationMEDIUMrerender-6Rendering PerformanceMEDIUMrendering-7JavaScript PerformanceLOW-MEDIUMjs-8Advanced PatternsLOWadvanced-
1. Eliminating Waterfalls (CRITICAL)
RuleDescriptionasync-defer-awaitMove await into branches where actually usedasync-parallelUse Promise.all() for independent operationsasync-dependenciesUse better-all for partial dependenciesasync-api-routesStart promises early, await late in API routesasync-suspense-boundariesUse Suspense to stream content
2. Bundle Size Optimization (CRITICAL)
RuleDescriptionbundle-barrel-importsImport directly, avoid barrel filesbundle-dynamic-importsUse next/dynamic for heavy componentsbundle-defer-third-partyLoad analytics/logging after hydrationbundle-conditionalLoad modules only when feature is activatedbundle-preloadPreload on hover/focus for perceived speed
3. Server-Side Performance (HIGH)
RuleDescriptionserver-auth-actionsAuthenticate server actions like API routesserver-cache-reactUse React.cache() for per-request dedupserver-cache-lruUse LRU cache for cross-request cachingserver-dedup-propsAvoid duplicate serialization in RSC propsserver-serializationMinimize data passed to client componentsserver-parallel-fetchingRestructure components to parallelize fetchesserver-after-nonblockingUse after() for non-blocking operations
4. Client-Side Data Fetching (MEDIUM-HIGH)
RuleDescriptionclient-swr-dedupUse SWR for automatic request deduplicationclient-event-listenersDeduplicate global event listenersclient-passive-event-listenersUse passive listeners for scrollclient-localstorage-schemaVersion and minimize localStorage data
5. Re-render Optimization (MEDIUM)
RuleDescriptionrerender-defer-readsDon't subscribe to state only used in callbacksrerender-memoExtract expensive work into memoized componentsrerender-memo-with-default-valueHoist default non-primitive propsrerender-dependenciesUse primitive dependencies in effectsrerender-derived-stateSubscribe to derived booleans, not raw valuesrerender-derived-state-no-effectDerive state during render, not effectsrerender-functional-setstateUse functional setState for stable callbacksrerender-lazy-state-initPass function to useState for expensive valuesrerender-simple-expression-in-memoAvoid memo for simple primitivesrerender-move-effect-to-eventPut interaction logic in event handlersrerender-transitionsUse startTransition for non-urgent updatesrerender-use-ref-transient-valuesUse refs for transient frequent values
6. Rendering Performance (MEDIUM)
RuleDescriptionrendering-animate-svg-wrapperAnimate div wrapper, not SVG elementrendering-content-visibilityUse content-visibility for long listsrendering-hoist-jsxExtract static JSX outside componentsrendering-svg-precisionReduce SVG coordinate precisionrendering-hydration-no-flickerUse inline script for client-only datarendering-hydration-suppress-warningSuppress expected mismatchesrendering-activityUse Activity component for show/hiderendering-conditional-renderUse ternary, not && for conditionalsrendering-usetransition-loadingPrefer useTransition for loading state
7. JavaScript Performance (LOW-MEDIUM)
RuleDescriptionjs-batch-dom-cssGroup CSS changes via classes or cssTextjs-index-mapsBuild Map for repeated lookupsjs-cache-property-accessCache object properties in loopsjs-cache-function-resultsCache function results in module-level Mapjs-cache-storageCache localStorage/sessionStorage readsjs-combine-iterationsCombine multiple filter/map into one loopjs-length-check-firstCheck array length before expensive opsjs-early-exitReturn early from functionsjs-hoist-regexpHoist RegExp creation outside loopsjs-min-max-loopUse loop for min/max instead of sortjs-set-map-lookupsUse Set/Map for O(1) lookupsjs-tosorted-immutableUse toSorted() for immutability
8. Advanced Patterns (LOW)
RuleDescriptionadvanced-event-handler-refsStore event handlers in refsadvanced-init-onceInitialize app once per app loadadvanced-use-latestuseLatest for stable callback refs
Reading Individual Rules
Each rule file in rules/ contains: Brief explanation of why it matters Incorrect code example with explanation Correct code example with explanation Additional context and references rules/async-parallel.md rules/bundle-barrel-imports.md rules/rerender-memo.md
Full Compiled Document
For the complete guide with all rules expanded: AGENTS.md This 2900+ line document contains every rule with full code examples and detailed explanations, suitable for comprehensive reference.
Parallel Data Fetching
// Bad: sequential const user = await fetchUser() const posts = await fetchPosts() // Good: parallel const [user, posts] = await Promise.all([ fetchUser(), fetchPosts() ])
Dynamic Imports
// Bad: bundles Monaco with main chunk import { MonacoEditor } from './monaco-editor' // Good: loads on demand const MonacoEditor = dynamic( () => import('./monaco-editor').then(m => m.MonacoEditor), { ssr: false } )
Functional setState
// Bad: stale closure risk const addItem = useCallback((item) => { setItems([...items, item]) }, [items]) // recreates on every items change // Good: always uses latest state const addItem = useCallback((item) => { setItems(curr => [...curr, item]) }, []) // stable reference
NEVER Do
NEVER await operations sequentially when they can run in parallel NEVER import from barrel files (import { X } from 'lib') โ import directly NEVER skip authentication in Server Actions โ treat them like API routes NEVER pass entire objects to client components when only one field is needed NEVER use && for conditional rendering with numbers โ use ternary NEVER subscribe to state only used in event handlers โ read on demand NEVER mutate arrays with .sort() โ use .toSorted() NEVER put initialization in useEffect([]) โ use module-level guard
Category context
Code helpers, APIs, CLIs, browser automation, testing, and developer operations.
Source: Tencent SkillHub
Largest current source with strong distribution and engagement signals.
Package contents
Included in package
6 Docs
- SKILL.md
- AGENTS.md
- README.md
- rules/bundle-conditional.md
- rules/bundle-preload.md
- rules/js-cache-storage.md