React Performance and State Design

Start from the reported behavior and relevant implementation. Select only the references that address the task; the catalog is not a checklist to apply to every component.

Establish applicability

• Inspect the installed React version, framework, target platform, build configuration, and existing compiler setup before proposing version-dependent changes.
• Identify the bottleneck with a reproduction, profiler trace, bundle report, or concrete dependency path. If measurement is unavailable, label the diagnosis as a hypothesis and explain how to validate it.
• Prefer a focused change with an observable benefit. Do not add or remove memoization, introduce caching, change build tooling, or preload resources without a reason tied to the task.
• Follow the project's state, effect, and data-fetching conventions. Web rendering, SSR, and framework-specific examples do not automatically apply to React Native or a different framework.

Read by problem

Problem or decision	Relevant references
Redundant state or synchronization bugs	State structure, immutable updates, effect pitfalls
A specific hook lifecycle or API question	Hooks guide
Requests wait on independent work	Waterfall elimination, parallel requests
Bundle report shows costly imports or initial code	Barrel imports, dynamic imports
Resource loading delays a likely user action	Preload on intent
Profiler shows costly repeated rendering	Memoization strategy, context splitting
Non-urgent rendering blocks an interaction	Transitions
Compiler adoption or compilation behavior is in scope	React Compiler
Repeated lookup cost is significant	Set and Map lookups
List identity or unexpected remounts	Key patterns
Expensive off-screen web content	Content visibility
Server-rendered web content visibly changes on hydration	Hydration flicker
Repeated static JSX creation is relevant to a measured cost	Hoist static JSX
Repeated server work or cache correctness	Server caching

Reference priority labels and examples describe possible interventions, not mandatory changes. Verify version-sensitive APIs and configuration against the installed toolchain and current official documentation before using them. React version alone is not a reason to enable React Compiler.

Complete the change

Preserve required behavior and use the applicable AGENTS.md test mode. For performance changes, compare the affected interaction or load path before and after when feasible; otherwise state the remaining verification gap. Report the concrete benefit and relevant limitations without claiming an unmeasured speedup.