# Send React Best Practices to your agent Use the source page and any available docs to guide the install because the item is currently unstable or timing out. ## Fast path - 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. ## Suggested prompts ### New install ```text 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 ```text 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. ``` ## Machine-readable fields ```json { "schemaVersion": "1.0", "item": { "slug": "react-best-practices", "name": "React Best Practices", "source": "tencent", "type": "skill", "category": "开发工具", "sourceUrl": "https://clawhub.ai/wpank/react-best-practices", "canonicalUrl": "https://clawhub.ai/wpank/react-best-practices", "targetPlatform": "OpenClaw" }, "install": { "downloadUrl": "/downloads/react-best-practices", "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=react-best-practices", "sourcePlatform": "tencent", "targetPlatform": "OpenClaw", "packageFormat": "ZIP package", "primaryDoc": "SKILL.md", "includedAssets": [ "README.md", "SKILL.md", "AGENTS.md", "rules/js-cache-storage.md", "rules/bundle-conditional.md", "rules/bundle-preload.md" ], "downloadMode": "manual_only", "sourceHealth": { "source": "tencent", "slug": "react-best-practices", "status": "unstable", "reason": "timeout", "recommendedAction": "retry_later", "checkedAt": "2026-05-07T23:15:37.847Z", "expiresAt": "2026-05-08T11:15:37.847Z", "httpStatus": null, "finalUrl": null, "contentType": null, "probeMethod": "head", "details": { "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=react-best-practices", "error": "Timed out after 5000ms", "slug": "react-best-practices" }, "scope": "item", "summary": "Item is unstable.", "detail": "This item is timing out or returning errors right now. Review the source page and try again later.", "primaryActionLabel": "Review source status", "primaryActionHref": "https://clawhub.ai/wpank/react-best-practices" }, "validation": { "installChecklist": [ "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." ], "postInstallChecks": [ "Confirm the extracted package includes the expected docs or setup files.", "Validate the skill or prompts are available in your target agent workspace.", "Capture any manual follow-up steps the agent could not complete." ] } }, "links": { "detailUrl": "https://openagent3.xyz/skills/react-best-practices", "downloadUrl": "https://openagent3.xyz/downloads/react-best-practices", "agentUrl": "https://openagent3.xyz/skills/react-best-practices/agent", "manifestUrl": "https://openagent3.xyz/skills/react-best-practices/agent.json", "briefUrl": "https://openagent3.xyz/skills/react-best-practices/agent.md" } } ``` ## 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 ## Trust - Source: tencent - Verification: Indexed source record - Publisher: wpank - Version: 1.0.0 ## Source health - Status: unstable - Item is unstable. - This item is timing out or returning errors right now. Review the source page and try again later. - Health scope: item - Reason: timeout - Checked at: 2026-05-07T23:15:37.847Z - Expires at: 2026-05-08T11:15:37.847Z - Recommended action: Review source status ## Links - [Detail page](https://openagent3.xyz/skills/react-best-practices) - [Send to Agent page](https://openagent3.xyz/skills/react-best-practices/agent) - [JSON manifest](https://openagent3.xyz/skills/react-best-practices/agent.json) - [Markdown brief](https://openagent3.xyz/skills/react-best-practices/agent.md) - [Download page](https://openagent3.xyz/downloads/react-best-practices)