home / skills / harborgrid-justin / lexiflow-premium / advanced-memoization-strategies

advanced-memoization-strategies skill

safe

/frontend/.github-skills/advanced-memoization-strategies

This skill helps optimize React rendering by applying principled memoization strategies to reduce re-renders while preserving correctness.

npx playbooks add skill harborgrid-justin/lexiflow-premium --skill advanced-memoization-strategies

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

Files (1)

SKILL.md

908 B

---
name: advanced-memoization-strategies
description: Apply principled memoization techniques to reduce re-rendering without introducing correctness bugs.
---

# Advanced Memoization Strategies (React 18)

## Summary

Apply principled memoization techniques to reduce re-rendering without introducing correctness bugs.

## Key Capabilities

- Distinguish structural vs semantic memoization benefits.
- Detect memoization thrashing and unstable dependencies.
- Use fine-grained memoization with stable object identity.

## PhD-Level Challenges

- Construct a formal cost model for memoization trade-offs.
- Prove absence of stale closure bugs under refactoring.
- Quantify memoization impact using real workloads.

## Acceptance Criteria

- Provide before/after render counts for target components.
- Demonstrate stable dependency graphs for memoized hooks.
- Document memoization policy and its rationale.

Overview

This skill applies principled memoization techniques to reduce unnecessary re-rendering in React apps without introducing correctness bugs. It focuses on identifying where memoization yields semantic benefit versus where it only masks structural issues. The goal is measurable render reductions with verified stable dependency graphs and documented policies.

How this skill works

The skill inspects component render counts, hook dependency stability, and object identity patterns to find memoization opportunities. It flags unstable dependencies, memoization thrashing, and places where fine-grained memoization (useMemo/useCallback/React.memo) will help. Results include before/after render metrics, a dependency stability report, and a recommended memoization policy with rationales.

When to use it

High-frequency UI where re-render cost is measurable (lists, tables, complex forms).
Components receiving many derived props that cause deep child re-renders.
When render profiling shows wasted renders despite correct UI state.
Before applying broad performance hacks that risk correctness.
When preparing a codebase for scale or heavy concurrent rendering.

Best practices

Prefer semantic memoization: memoize values that avoid meaningful recomputation, not just identity changes.
Stabilize object/array identity at the creation point (useMemo for derived values, factories for handlers).
Avoid unnecessary dependency arrays; make dependencies explicit and validated by tests.
Detect and fix memoization thrashing by measuring renders before and after changes.
Document a memoization policy per component or module explaining trade-offs and invariants.

Example use cases

Reduce re-renders of a large data table by memoizing row renderers and cell formatters.
Stabilize event handler identities for deeply nested children to prevent prop cascades.
Apply fine-grained memoization to computed props in a form library to speed validation cycles.
Audit a legacy UI to replace brittle ad-hoc caching with a principled memoization policy.
Quantify render savings on heavy pages and verify no stale-closure regressions via tests.

FAQ

Will memoization change component behavior?

If applied correctly with stable dependencies and tests that assert behavior, memoization should not change observable behavior. The skill emphasizes proving absence of stale closures and documenting invariants.

How do I know memoization is worth it?

Measure render counts and CPU cost before and after. The skill requires before/after metrics and a cost model to justify memoization choices.