{
  "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": {
    "downloadMode": "redirect",
    "downloadUrl": "/downloads/react-best-practices",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=react-best-practices",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "installMethod": "Manual import",
    "extraction": "Extract archive",
    "prerequisites": [
      "OpenClaw"
    ],
    "packageFormat": "ZIP package",
    "includedAssets": [
      "README.md",
      "SKILL.md",
      "AGENTS.md",
      "rules/js-cache-storage.md",
      "rules/bundle-conditional.md",
      "rules/bundle-preload.md"
    ],
    "primaryDoc": "SKILL.md",
    "quickSetup": [
      "Download the package from Yavira.",
      "Extract the archive and review SKILL.md first.",
      "Import or place the package into your OpenClaw setup."
    ],
    "agentAssist": {
      "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
      "steps": [
        "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."
      ],
      "prompts": [
        {
          "label": "New install",
          "body": "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."
        },
        {
          "label": "Upgrade existing",
          "body": "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."
        }
      ]
    },
    "sourceHealth": {
      "source": "tencent",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-05-07T17:22:31.273Z",
      "expiresAt": "2026-05-14T17:22:31.273Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=afrexai-annual-report",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=afrexai-annual-report",
        "contentDisposition": "attachment; filename=\"afrexai-annual-report-1.0.0.zip\"",
        "redirectLocation": null,
        "bodySnippet": null
      },
      "scope": "source",
      "summary": "Source download looks usable.",
      "detail": "Yavira can redirect you to the upstream package for this source.",
      "primaryActionLabel": "Download for OpenClaw",
      "primaryActionHref": "/downloads/react-best-practices"
    },
    "validation": {
      "installChecklist": [
        "Use the Yavira download entry.",
        "Review SKILL.md after the package is downloaded.",
        "Confirm the extracted package contains the expected setup assets."
      ],
      "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."
      ]
    },
    "downloadPageUrl": "https://openagent3.xyz/downloads/react-best-practices",
    "agentPageUrl": "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"
  },
  "agentAssist": {
    "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
    "steps": [
      "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."
    ],
    "prompts": [
      {
        "label": "New install",
        "body": "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."
      },
      {
        "label": "Upgrade existing",
        "body": "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."
      }
    ]
  },
  "documentation": {
    "source": "clawhub",
    "primaryDoc": "SKILL.md",
    "sections": [
      {
        "title": "React Best Practices",
        "body": "Comprehensive performance optimization guide for React and Next.js applications from Vercel Engineering. Contains 57 rules across 8 categories, prioritized by impact."
      },
      {
        "title": "OpenClaw / Moltbot / Clawbot",
        "body": "npx clawhub@latest install react-best-practices"
      },
      {
        "title": "WHAT This Skill Does",
        "body": "Provides actionable rules for:\n\nEliminating request waterfalls\nOptimizing bundle size\nImproving server-side performance\nEfficient client-side data fetching\nMinimizing re-renders\nRendering performance optimizations\nJavaScript micro-optimizations\nAdvanced patterns for edge cases"
      },
      {
        "title": "WHEN To Use",
        "body": "Writing new React components or Next.js pages\nImplementing data fetching (client or server-side)\nReviewing code for performance issues\nRefactoring React/Next.js applications\nOptimizing bundle size or load times\nDebugging slow renders or waterfalls"
      },
      {
        "title": "KEYWORDS",
        "body": "react performance, nextjs optimization, bundle size, waterfalls, suspense, server components, rsc, rerender, usememo, dynamic import, parallel fetching, cache, swr"
      },
      {
        "title": "Rule Categories by Priority",
        "body": "PriorityCategoryImpactRule Prefix1Eliminating WaterfallsCRITICALasync-2Bundle Size OptimizationCRITICALbundle-3Server-Side PerformanceHIGHserver-4Client-Side Data FetchingMEDIUM-HIGHclient-5Re-render OptimizationMEDIUMrerender-6Rendering PerformanceMEDIUMrendering-7JavaScript PerformanceLOW-MEDIUMjs-8Advanced PatternsLOWadvanced-"
      },
      {
        "title": "1. Eliminating Waterfalls (CRITICAL)",
        "body": "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"
      },
      {
        "title": "2. Bundle Size Optimization (CRITICAL)",
        "body": "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"
      },
      {
        "title": "3. Server-Side Performance (HIGH)",
        "body": "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"
      },
      {
        "title": "4. Client-Side Data Fetching (MEDIUM-HIGH)",
        "body": "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"
      },
      {
        "title": "5. Re-render Optimization (MEDIUM)",
        "body": "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"
      },
      {
        "title": "6. Rendering Performance (MEDIUM)",
        "body": "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"
      },
      {
        "title": "7. JavaScript Performance (LOW-MEDIUM)",
        "body": "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"
      },
      {
        "title": "8. Advanced Patterns (LOW)",
        "body": "RuleDescriptionadvanced-event-handler-refsStore event handlers in refsadvanced-init-onceInitialize app once per app loadadvanced-use-latestuseLatest for stable callback refs"
      },
      {
        "title": "Reading Individual Rules",
        "body": "Each rule file in rules/ contains:\n\nBrief explanation of why it matters\nIncorrect code example with explanation\nCorrect code example with explanation\nAdditional context and references\n\nrules/async-parallel.md\nrules/bundle-barrel-imports.md\nrules/rerender-memo.md"
      },
      {
        "title": "Full Compiled Document",
        "body": "For the complete guide with all rules expanded: AGENTS.md\n\nThis 2900+ line document contains every rule with full code examples and detailed explanations, suitable for comprehensive reference."
      },
      {
        "title": "Parallel Data Fetching",
        "body": "// Bad: sequential\nconst user = await fetchUser()\nconst posts = await fetchPosts()\n\n// Good: parallel\nconst [user, posts] = await Promise.all([\n  fetchUser(),\n  fetchPosts()\n])"
      },
      {
        "title": "Dynamic Imports",
        "body": "// Bad: bundles Monaco with main chunk\nimport { MonacoEditor } from './monaco-editor'\n\n// Good: loads on demand\nconst MonacoEditor = dynamic(\n  () => import('./monaco-editor').then(m => m.MonacoEditor),\n  { ssr: false }\n)"
      },
      {
        "title": "Functional setState",
        "body": "// Bad: stale closure risk\nconst addItem = useCallback((item) => {\n  setItems([...items, item])\n}, [items]) // recreates on every items change\n\n// Good: always uses latest state\nconst addItem = useCallback((item) => {\n  setItems(curr => [...curr, item])\n}, []) // stable reference"
      },
      {
        "title": "NEVER Do",
        "body": "NEVER await operations sequentially when they can run in parallel\nNEVER import from barrel files (import { X } from 'lib') — import directly\nNEVER skip authentication in Server Actions — treat them like API routes\nNEVER pass entire objects to client components when only one field is needed\nNEVER use && for conditional rendering with numbers — use ternary\nNEVER subscribe to state only used in event handlers — read on demand\nNEVER mutate arrays with .sort() — use .toSorted()\nNEVER put initialization in useEffect([]) — use module-level guard"
      }
    ],
    "body": "React Best Practices\n\nComprehensive performance optimization guide for React and Next.js applications from Vercel Engineering. Contains 57 rules across 8 categories, prioritized by impact.\n\nInstallation\nOpenClaw / Moltbot / Clawbot\nnpx clawhub@latest install react-best-practices\n\nWHAT This Skill Does\n\nProvides actionable rules for:\n\nEliminating request waterfalls\nOptimizing bundle size\nImproving server-side performance\nEfficient client-side data fetching\nMinimizing re-renders\nRendering performance optimizations\nJavaScript micro-optimizations\nAdvanced patterns for edge cases\nWHEN To Use\nWriting new React components or Next.js pages\nImplementing data fetching (client or server-side)\nReviewing code for performance issues\nRefactoring React/Next.js applications\nOptimizing bundle size or load times\nDebugging slow renders or waterfalls\nKEYWORDS\n\nreact performance, nextjs optimization, bundle size, waterfalls, suspense, server components, rsc, rerender, usememo, dynamic import, parallel fetching, cache, swr\n\nRule Categories by Priority\nPriority\tCategory\tImpact\tRule Prefix\n1\tEliminating Waterfalls\tCRITICAL\tasync-\n2\tBundle Size Optimization\tCRITICAL\tbundle-\n3\tServer-Side Performance\tHIGH\tserver-\n4\tClient-Side Data Fetching\tMEDIUM-HIGH\tclient-\n5\tRe-render Optimization\tMEDIUM\trerender-\n6\tRendering Performance\tMEDIUM\trendering-\n7\tJavaScript Performance\tLOW-MEDIUM\tjs-\n8\tAdvanced Patterns\tLOW\tadvanced-\nQuick Reference\n1. Eliminating Waterfalls (CRITICAL)\nRule\tDescription\nasync-defer-await\tMove await into branches where actually used\nasync-parallel\tUse Promise.all() for independent operations\nasync-dependencies\tUse better-all for partial dependencies\nasync-api-routes\tStart promises early, await late in API routes\nasync-suspense-boundaries\tUse Suspense to stream content\n2. Bundle Size Optimization (CRITICAL)\nRule\tDescription\nbundle-barrel-imports\tImport directly, avoid barrel files\nbundle-dynamic-imports\tUse next/dynamic for heavy components\nbundle-defer-third-party\tLoad analytics/logging after hydration\nbundle-conditional\tLoad modules only when feature is activated\nbundle-preload\tPreload on hover/focus for perceived speed\n3. Server-Side Performance (HIGH)\nRule\tDescription\nserver-auth-actions\tAuthenticate server actions like API routes\nserver-cache-react\tUse React.cache() for per-request dedup\nserver-cache-lru\tUse LRU cache for cross-request caching\nserver-dedup-props\tAvoid duplicate serialization in RSC props\nserver-serialization\tMinimize data passed to client components\nserver-parallel-fetching\tRestructure components to parallelize fetches\nserver-after-nonblocking\tUse after() for non-blocking operations\n4. Client-Side Data Fetching (MEDIUM-HIGH)\nRule\tDescription\nclient-swr-dedup\tUse SWR for automatic request deduplication\nclient-event-listeners\tDeduplicate global event listeners\nclient-passive-event-listeners\tUse passive listeners for scroll\nclient-localstorage-schema\tVersion and minimize localStorage data\n5. Re-render Optimization (MEDIUM)\nRule\tDescription\nrerender-defer-reads\tDon't subscribe to state only used in callbacks\nrerender-memo\tExtract expensive work into memoized components\nrerender-memo-with-default-value\tHoist default non-primitive props\nrerender-dependencies\tUse primitive dependencies in effects\nrerender-derived-state\tSubscribe to derived booleans, not raw values\nrerender-derived-state-no-effect\tDerive state during render, not effects\nrerender-functional-setstate\tUse functional setState for stable callbacks\nrerender-lazy-state-init\tPass function to useState for expensive values\nrerender-simple-expression-in-memo\tAvoid memo for simple primitives\nrerender-move-effect-to-event\tPut interaction logic in event handlers\nrerender-transitions\tUse startTransition for non-urgent updates\nrerender-use-ref-transient-values\tUse refs for transient frequent values\n6. Rendering Performance (MEDIUM)\nRule\tDescription\nrendering-animate-svg-wrapper\tAnimate div wrapper, not SVG element\nrendering-content-visibility\tUse content-visibility for long lists\nrendering-hoist-jsx\tExtract static JSX outside components\nrendering-svg-precision\tReduce SVG coordinate precision\nrendering-hydration-no-flicker\tUse inline script for client-only data\nrendering-hydration-suppress-warning\tSuppress expected mismatches\nrendering-activity\tUse Activity component for show/hide\nrendering-conditional-render\tUse ternary, not && for conditionals\nrendering-usetransition-loading\tPrefer useTransition for loading state\n7. JavaScript Performance (LOW-MEDIUM)\nRule\tDescription\njs-batch-dom-css\tGroup CSS changes via classes or cssText\njs-index-maps\tBuild Map for repeated lookups\njs-cache-property-access\tCache object properties in loops\njs-cache-function-results\tCache function results in module-level Map\njs-cache-storage\tCache localStorage/sessionStorage reads\njs-combine-iterations\tCombine multiple filter/map into one loop\njs-length-check-first\tCheck array length before expensive ops\njs-early-exit\tReturn early from functions\njs-hoist-regexp\tHoist RegExp creation outside loops\njs-min-max-loop\tUse loop for min/max instead of sort\njs-set-map-lookups\tUse Set/Map for O(1) lookups\njs-tosorted-immutable\tUse toSorted() for immutability\n8. Advanced Patterns (LOW)\nRule\tDescription\nadvanced-event-handler-refs\tStore event handlers in refs\nadvanced-init-once\tInitialize app once per app load\nadvanced-use-latest\tuseLatest for stable callback refs\nHow to Use\nReading Individual Rules\n\nEach rule file in rules/ contains:\n\nBrief explanation of why it matters\nIncorrect code example with explanation\nCorrect code example with explanation\nAdditional context and references\nrules/async-parallel.md\nrules/bundle-barrel-imports.md\nrules/rerender-memo.md\n\nFull Compiled Document\n\nFor the complete guide with all rules expanded: AGENTS.md\n\nThis 2900+ line document contains every rule with full code examples and detailed explanations, suitable for comprehensive reference.\n\nKey Patterns\nParallel Data Fetching\n// Bad: sequential\nconst user = await fetchUser()\nconst posts = await fetchPosts()\n\n// Good: parallel\nconst [user, posts] = await Promise.all([\n  fetchUser(),\n  fetchPosts()\n])\n\nDynamic Imports\n// Bad: bundles Monaco with main chunk\nimport { MonacoEditor } from './monaco-editor'\n\n// Good: loads on demand\nconst MonacoEditor = dynamic(\n  () => import('./monaco-editor').then(m => m.MonacoEditor),\n  { ssr: false }\n)\n\nFunctional setState\n// Bad: stale closure risk\nconst addItem = useCallback((item) => {\n  setItems([...items, item])\n}, [items]) // recreates on every items change\n\n// Good: always uses latest state\nconst addItem = useCallback((item) => {\n  setItems(curr => [...curr, item])\n}, []) // stable reference\n\nNEVER Do\nNEVER await operations sequentially when they can run in parallel\nNEVER import from barrel files (import { X } from 'lib') — import directly\nNEVER skip authentication in Server Actions — treat them like API routes\nNEVER pass entire objects to client components when only one field is needed\nNEVER use && for conditional rendering with numbers — use ternary\nNEVER subscribe to state only used in event handlers — read on demand\nNEVER mutate arrays with .sort() — use .toSorted()\nNEVER put initialization in useEffect([]) — use module-level guard"
  },
  "trust": {
    "sourceLabel": "tencent",
    "provenanceUrl": "https://clawhub.ai/wpank/react-best-practices",
    "publisherUrl": "https://clawhub.ai/wpank/react-best-practices",
    "owner": "wpank",
    "version": "1.0.0",
    "license": null,
    "verificationStatus": "Indexed source record"
  },
  "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"
  }
}