/react-rerenders

Make it your own.

In Claude Code, use the slash command and add your context. In Codex, select react-rerenders from the just-vibe skill picker, then send the same brief.

Version 0.11.0 also supports /jv react-rerenders, /just-vibe react-rerenders and /jv:react-rerenders in Claude. See shortcut setup and context examples.

What the agent does

1. Capture a baseline of the same interaction in the profiler (React Performance Tracks where available), separating render from commit cost.
2. Trace the props, context or identity responsible for the expensive work. Before adding manual memoization, check if React Compiler is enabled and if the component compiled or bailed out.
3. When a fix is requested, change the measured cause, then repeat the interaction and compare behavior and timing.

Inputs

• slow interaction, component scope, and profiler traces.

Optional context: scope, references, constraints, successCriteria, environment, mode, budget.

Scope

Reads

Unnecessary rendering, expensive render work, and state propagation.

Writes

Inspect/plan: inspect or propose; save requested artifacts only. Apply: edit the requested local implementation and perform relevant bounded checks while preserving unrelated work. Live data changes, remote actions and paid jobs require their resolved target and existing session authorization.

Mode

Inspect; slow interaction, component scope, and profiler traces. Apply for an explicit fix request; profiling a local build is bounded local execution.

Prerequisites

Component source, React/framework versions, state/data conventions, and relevant test tooling. Browser/profiler evidence is needed for measured rendering claims. Preserve existing framework and state libraries unless changing them is part of the request.

Expected output

• Interaction/profile conditions, the dominant component and cause, and a comparable result or patch with its evidence.

How the work is checked

• The slow interaction improves measurably; memoization does not preserve stale data or break callbacks.

When to stop or clarify

• Avoid blanket memoization and equating render count with user-visible cost. Missing profiles yield hypotheses only.

Handling missing context

Infer

Read component callers, ownership of state, installed React/framework versions and existing interaction tests.

Assume

Retain the framework and state library; preserve intended loading/error/empty behavior while resolving the named bug.

Ask

Ask when product semantics such as persistence, optimistic failure or reset behavior have conflicting evidence; missing profiler access only blocks measured performance claims.

Technical guidance

Evidence

Capture a representative interaction in the profiler with fixed data and production-like behavior.

Method

Locate changing context/prop identities or expensive work, then optimize the measured cause while preserving fresh closures.

Pitfall

Render counts include harmless work and development checks; memoization can retain stale behavior or cost more than recomputation.

Check

Repeat the same interaction and compare duration/responsiveness while checking that updated inputs still reach callbacks.

Situational decisions

When render counts fall but latency or correctness worsens: Reject the optimization and inspect stale closures, comparison cost or unrelated bottlenecks.

The coding agent follows this workflow using its available tools. Installation does not grant service access or guarantee an outcome. Read the compatibility notes.

Keep exploring