home / skills / harborgrid-justin / lexiflow-premium / precision-re-render-control

precision-re-render-control skill

/frontend/.github-skills/precision-re-render-control

This skill helps you minimize unnecessary re-renders by partitioning state and using selector-driven updates to optimize React applications.

npx playbooks add skill harborgrid-justin/lexiflow-premium --skill precision-re-render-control

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

843 B

---
name: precision-re-render-control
description: Minimize unnecessary re-renders through precise state partitioning and selector-driven updates.
---

# Precision Re-render Control (React 18)

## Summary

Minimize unnecessary re-renders through precise state partitioning and selector-driven updates.

## Key Capabilities

- Implement selector-based memoization for fine-grained updates.
- Partition global state to isolate hot paths.
- Detect referential instability and eliminate it.

## PhD-Level Challenges

- Construct a formal model of re-render propagation.
- Prove minimality of renders under defined constraints.
- Evaluate selector stability with adversarial updates.

## Acceptance Criteria

- Provide render-count baselines and improvements.
- Demonstrate stable selectors with no thrashing.
- Document state partition strategy.

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

FAQ

How much improvement can I expect?

Typical improvements range from 30% to 90% fewer renders on hot paths, depending on current coupling and selector quality; always measure with baselines.

Does this require a specific state library?

No. The approach is library-agnostic: apply partitioning and selector stability principles to Redux, Zustand, Context, or custom stores.