precision-re-render-control_skill

Overview

This skill minimizes unnecessary React re-renders by combining precise state partitioning with selector-driven updates. It targets hot paths in UI and enforces stable selectors and referential integrity to reduce update noise. The approach yields measurable render-count improvements and clear documentation of the partition strategy.

How this skill works

The skill inspects component update patterns and divides global state into fine-grained partitions so only relevant subscribers re-evaluate. It layers selector-based memoization on top of partitions to compute and subscribe to exactly the derived values a component needs. It also detects referential instability (unstable object/array/function identities) and recommends transformations to eliminate thrashing.

When to use it

• Large React 18 applications with frequent UI updates and measurable rendering overhead
• When a single global store causes many unrelated components to re-render
• When you need predictable render budgets for performance-sensitive UIs
• Before and after introducing complex derived state or expensive selectors
• When debugging sporadic or adversarial update patterns that degrade responsiveness

Best practices

• Partition state by feature and by hot vs cold access patterns to isolate high-frequency updates
• Write selectors that return primitives or stable references and memoize per subscriber
• Avoid anonymous inline objects/arrays/functions in props; hoist or memoize them
• Measure render counts before changes and track improvements with automated baselines
• Document the partition strategy and selector contracts so future contributors preserve stability

Example use cases

• A legal management UI where frequent timeline updates should not re-render unrelated document lists
• A dashboard with multiple widgets: partitioning prevents one widget's polling from affecting others
• Migrating a monolithic global store into isolated slices to reduce CPU load and jank
• Hardening selector logic against adversarial input updates that previously caused thrashing