SkillVaultskills Browse all 500 skills

Frontend · Version 1.5.0 · Reviewed 2026-08-02

React Performance Reviewer

Improve render profiling and bundle analysis with evidence, explicit trade-offs, and a verification plan.

4 method steps 6 documented failure modes 5 diagnostic checks 7 quality gates

Finds unnecessary renders, unstable dependencies, large hydration boundaries, expensive effects, and bundle-loading problems in React applications.

₹99 one-time

Get this skill archive

What this skill helps you do

  • Render profiling
  • Bundle analysis
  • State architecture review

How React Performance Reviewer works

You provide

Schema, query plans, and the real access pattern

It inspects

Plan accuracy and lock behavior for render profiling

It decides

A bundle analysis change weighed against write cost

You verify

Re-measured plan with buffer reads and timing compared

What it checks first

React Performance Reviewer finds unnecessary renders, unstable dependencies, large hydration boundaries, expensive effects, and bundle-loading problems in React applications. Use it when the work involves Render profiling, Bundle analysis, State architecture review.

  1. The actual query plan with real row counts, not the estimated plan or the query text alone.
  2. Whether the workload is read-heavy, write-heavy, or mixed, since the correct design differs sharply.
  3. Transaction boundaries and duration, because long transactions block vacuum and hold locks.
  4. Index coverage relative to both the filter and the sort, since satisfying one but not the other still costs a sort.
  5. Connection pool behavior, as pool exhaustion presents as database slowness while the database is idle.

Failure modes it recognizes

  • An index that serves the predicate but not the ordering, forcing a full sort for a small LIMIT.
  • A long-running transaction preventing vacuum and causing gradual bloat and plan degradation.
  • Implicit type casting on a join or filter column silently disabling index use.
  • Connection pool exhaustion from long-held connections, appearing as a database problem.
  • A write-heavy table with excessive indexes where insert cost dominates the workload.
  • Statistics stale after a bulk load, so the planner chooses a plan for a table size that no longer exists.

Answers it will reject

  • Adding an index per slow query until write amplification becomes the new bottleneck.
  • Tuning configuration parameters before examining the plan for the dominant query.
  • Interpreting `EXPLAIN` without `ANALYZE`, which reports estimates and proves nothing.
  • Increasing pool size to fix latency caused by lock contention, which adds waiters rather than capacity.

Decision rules it applies

  • Optimize the query that dominates total time, not the one that feels slowest in isolation.
  • Order composite index columns by equality first, then range or sort last.
  • Keep transactions short and never hold one open across an external call.
  • Create and drop indexes concurrently on live tables, accepting the longer build for the absent lock.

Evidence it asks for

  • `EXPLAIN (ANALYZE, BUFFERS)` to compare estimated with actual rows and attribute I/O.
  • Rank queries by cumulative execution time rather than by single-execution latency.
  • Monitor the oldest open transaction and lock wait counts as standing metrics.

The method inside

  1. Map the artifact, actors, boundaries, and invariants relevant to render profiling.
  2. Trace concrete failure or abuse paths for bundle analysis; do not report checklist items without a mechanism.
  3. Prioritize state architecture review findings by impact, likelihood, confidence, and cost of correction.
  4. Recommend the smallest defensible change, then define how an independent reviewer can verify it.

Deliverables

  • Render profiling assessment
  • Bundle analysis decision and action plan
  • State architecture review verification checklist

Evidence requirements

  • Interface code, rendered behavior, and user journey
  • Browser/device matrix and accessibility tree
  • Performance and usability observations

Quality gates

  • Every material claim traces to supplied evidence or is labeled as a hypothesis.
  • The response follows the declared deliverable contract.
  • No execution, access, measurement, or verification is invented.
  • Secrets and personal data are redacted rather than repeated.
  • The user receives a concrete independent verification step.
  • The relevant failure modes in this domain were considered rather than only the reported symptom.
  • No listed anti-pattern was recommended as a solution.

Example task

Input

This React dashboard feels slow when one filter changes even though the API response is fast.

Expected output

The filter state lives above every chart, so all twelve visualization trees rerender on each keystroke. Split committed query state from draft input and memoize only the expensive chart transforms...

Boundaries and compatibility

Ideal for

  • Render profiling: produce a decision or artifact grounded in supplied evidence.
  • Bundle analysis: produce a decision or artifact grounded in supplied evidence.
  • State architecture review: produce a decision or artifact grounded in supplied evidence.

Out of scope

  • Treating automated accessibility scans as complete
  • Changing visual style without preserving behavior

Agent compatibility

  • GitHub Copilot custom agents
  • Claude Agent Skills / SKILL.md
  • Any instruction-following chat model

Tool policy: Advisory by default. No tools are assumed. If the host provides tools, use read-only evidence gathering unless the user explicitly approves a scoped write or execution action.