Improve React performance with ak:react-best-practices

Use ak:react-best-practices to review or improve React and Next.js performance. Its bundled January 2026 rule set contains 45 patterns across async waterfalls, bundle size, server work, client fetching, re-renders, rendering, JavaScript hot paths, and advanced callback patterns.

Choose ak:react-best-practices for measured optimization

Use ak:react-best-practices when

• A React component, Next.js route, server function, or bundle has a defined performance problem or budget.
• You want a focused performance audit with ranked findings before mutation.
• You need to remove waterfalls, reduce shipped code, narrow re-renders, or improve a measured hot path.
• You want implementation guidance tied to the project’s actual React, Next.js, browser, and deployment versions.

Choose another workflow when

• You need general React feature implementation rather than performance work. Use ak:frontend-development.
• The visual or interaction design is unresolved. Use ak:frontend-design.
• You are diagnosing an unexplained failure. Use ak:debug or ak:fix before optimizing.
• You only want independent verification of an existing patch. Use ak:code-review or ak:test.

Prepare a baseline and compatibility map

Before you start:

• Complete Onboarding, and confirm Engineer Kit is installed for the current runtime and scope.
• Read the installed React, Next.js, bundler, server runtime, browser target, package manager, data library, and deployment model from the project.
• Provide the affected route/component, user-visible symptom, performance budget, representative workload, and current measurements.
• Identify generated files, server/client boundaries, caching semantics, CSP, hydration policy, analytics, and test requirements.
• State whether dependency installation, config changes, bundle analysis, browser profiling, local servers, remote telemetry, or deployment is allowed.

See Runtime adapters for component-level differences.

Run the Skill

The declared argument shape is [component or pattern]. Ask for an audit-only pass when you do not want code changes; otherwise state the allowed files and required measurements.

/ak:react-best-practices "Audit the existing Next.js product route for server waterfalls and client bundle cost. Use the installed versions and current profiler/build output, propose ranked changes first, implement only the top approved change, preserve behavior, add focused tests, and do not install packages or deploy."

/ak:react-best-practices "Audit the existing Next.js product route for server waterfalls and client bundle cost. Use the installed versions and current profiler/build output, propose ranked changes first, implement only the top approved change, preserve behavior, add focused tests, and do not install packages or deploy."

$ak:react-best-practices "Audit the existing Next.js product route for server waterfalls and client bundle cost. Use the installed versions and current profiler/build output, propose ranked changes first, implement only the top approved change, preserve behavior, add focused tests, and do not install packages or deploy."

Observe an evidence-led optimization

1. The run establishes the baseline. It reproduces the target workload and records the current performance and behavior before editing.
2. The run maps compatibility. It checks whether referenced APIs such as Activity, useEffectEvent, Next.js after, next/dynamic, optimizePackageImports, React cache, or toSorted exist in the project’s supported versions.
3. The run ranks findings by impact and confidence. Critical network and bundle issues come before speculative micro-optimizations.
4. The run implements a bounded change. It preserves data dependencies, error behavior, accessibility, hydration, cache invalidation, and server or client ownership.
5. The run verifies behavior and performance. Focused tests and the same baseline procedure run again; regressions or inconclusive measurements stay visible.
6. The run reports the evidence. Changed files, rule applied, before/after results, dependencies, environment limits, and rejected or deferred findings are listed.

Keep optimization side effects explicit

• Use Promise.all only for independent operations. Preserve dependency and failure semantics.
• Cross-request in-memory caches behave differently on long-lived servers, serverless isolates, and multi-instance deployments. Define keys, TTL, invalidation, tenant isolation, and fallback behavior.
• Direct imports, dynamic imports, SWR, LRU caches, or partial-dependency helpers may require compatible packages and configuration. Do not install them merely to match a reference example.
• Inline hydration scripts must comply with CSP, escaping, privacy, and the project’s server-rendering contract.
• Bundle analysis, profiling, builds, and browser runs can consume substantial CPU, memory, storage, ports, and time. Remote telemetry can send project or user data.
• Commit, publication, rollout, and deployment remain separate approvals.

Verify the result

A complete result should provide:

• The baseline method and result, affected user path, environment, and dataset.
• Ranked findings with rule identity, evidence, compatibility, expected impact, confidence, and behavior risk.
• Exact changed files, imports, config, dependencies, generated output, and server/client boundary changes.
• Focused typecheck and behavioral test results plus comparable before/after performance evidence.
• Cache, hydration, error, accessibility, and fallback behavior where the change touches them.
• An explicit disposition for inconclusive measurements and deferred findings.

Troubleshoot or continue

Continue with ak:frontend-development for implementation, ak:web-testing for browser evidence, or the Engineer Kit overview for coordinated delivery.

Know the current limits

• The Skill is a static January 2026 guideline set, not a live React, Next.js, browser, package, or host compatibility database.
• Impact labels and example metrics prioritize investigation; they do not prove the same gain in your application.
• The shipped Skill contains rule documents, not a project-specific profiler, benchmark suite, visual-regression harness, or deployment monitor.
• It does not replace correctness, accessibility, security, privacy, cross-browser, or production load testing.
• Stable and beta contain identical Skill content and resources for this release pair. Beta Codex Hook diagnostics do not change this workflow.