React Coding Style

Optimize for the smallest render surface. Keep volatile reads in leaves, prevent changing identities from propagating through stable subtrees, and accept modest structural complexity when it avoids broad or expensive re-renders. Preserve correctness: event or imperative freshness is not a substitute for props or subscriptions that update rendered output.

Scope

• Follow the requested mode: implement safe improvements within scope, or report findings without editing during a review or audit. Suggest changes that substantially broaden state ownership, component architecture, dependencies, or public APIs unless the user approves that wider work.
• During explicit performance work, investigate every evidence-backed source of material render cost. During ordinary React work, apply relevant safeguards within scope and mention broader opportunities only when they are likely material.

First Pass

• Check the React version, platform, lint rules, and nearby component patterns. Determine whether React Compiler is enabled for the target build and whether it compiles the affected components or hooks; do not infer coverage from package presence or a single config flag.
• Identify which values render UI and which are read only by events, async work, subscriptions, or imperative bridges.
• Trace each changing value through props, context, callbacks, and subscriptions; identify how much of the tree and which expensive or native boundaries it can update.
• Find the smallest component or selector that needs each changing value.
• Locate existing selector, stable-callback, latest-ref, memo, observer, and external-store helpers.

Render Path