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
Quick setup
- Download the package from Yavira.
- Extract the archive and review SKILL.md first.
- Import or place the package into your OpenClaw setup.
Package facts
- Download mode
- Yavira redirect
- 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
- Use the Yavira download entry.
- Review SKILL.md after the package is downloaded.
- Confirm the extracted package contains the expected setup assets.
Install with your agent
Agent handoff
Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.
- Download the package from Yavira.
- Extract it into a folder your agent can access.
- Paste one of the prompts below and point your agent at the extracted folder.
New install
I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Then review README.md for any prerequisites, environment setup, or post-install checks. Tell me what you changed and call out any manual steps you could not complete.
Upgrade existing
I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Then review README.md for any prerequisites, environment setup, or post-install checks. Summarize what changed and any follow-up checks I should run.
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