immutable-patterns

What it does and when to use it

Use when reviewing scripts, client components, bundles, or runtime behavior related to Prefer immutable data patterns. Inspect both source code and the browser execution path so fixes target the real bottleneck or bug.

How it works

1. Quick Reference
2. Check
3. Fix
4. Explain
5. Code Review

---
name: immutable-patterns
description: "Use when reviewing scripts, client components, bundles, or runtime behavior related to Prefer immutable data patterns. Inspect both source code and the browser execution path so fixes target the real bottleneck or bug."
metadata:
  category: javascript
  priority: medium
  difficulty: intermediate
  estimatedTime: "20"
  source: frontendchecklist.io
  url: https://frontendchecklist.io/rules/javascript/immutable-patterns
---

# Prefer immutable data patterns

Mutating shared objects makes it impossible to track where a value changed. When you update state immutably, each version of the data is a separate object — you can compare references to detect changes, time-travel debug, and know exactly which part of your code changed the data.

## Quick Reference

- Use spread (...) to create modified copies of objects and arrays
- Prefer map(), filter(), and reduce() over push(), splice(), and direct assignment
- Use Object.freeze() for configuration objects that should never change
- Immutability is especially important in state management (Redux, Zustand, Signals)

## Check

Find all places in this code where objects or arrays are mutated in place. Flag direct property assignments on function parameters and push/splice on arrays.

## Fix

Replace in-place mutations with immutable patterns using spread operators and non-mutating array methods.

## Explain

Explain immutable data patterns, why mutation causes bugs in shared state, and how spread and array methods enable immutability.

## Code Review

Review scripts, client components, and browser execution paths related to Prefer immutable data patterns. Flag exact imports, event handlers, runtime side effects, or blocking operations that violate the rule, and state how the change should be verified in the browser.

---

For full implementation details, code examples, and framework-specific guidance,
see `references/rule.md`.

Rule page: https://frontendchecklist.io/rules/javascript/immutable-patterns

Versions

The database has no other skills named immutable-patterns.

Database snapshot: 13.11.2026 · package version 532c26401c55 (SHA-256 digest of the entire package)

Downloads in the last 30 days: 0 · ranking

Report a problem with this skill: harmful content, incorrect descriptions or an author’s removal request.

Similar skills

• 100es-modules
  Use when reviewing scripts, client components, bundles, or runtime behavior related to Use ES modules (import/export). Inspect both source code and the browser execution path so fixes target the real bottleneck or bug.
• 100error-handling
  Use when reviewing scripts, client components, bundles, or runtime behavior related to Implement proper error handling. Inspect both source code and the browser execution path so fixes target the real bottleneck or bug.
• 100source-code-context
  Use when Hermes is integrating a package, SDK, API client, framework, or open-source tool and should inspect real local source instead of guessing API names or behavior from stale docs.
• 100react-server-components
  React Server Components (RSC) for server-side rendering without client JS. Covers Server vs Client components, data fetching patterns, Server Actions, streaming, caching, and Next.js App Router integration. USE WHEN: user mentions "Server Components", "RSC", "Next.js App…
• 100scala-immutable-data
  How to convert Python mutable dataclasses and enums to immutable Scala case classes, sealed traits, and sealed objects. Use when translating Python @dataclass, Enum, and mutable collection patterns to idiomatic Scala. Covers immutable-by-default patterns, copy with…
• 90mine-plan-review
  Strictly review one implemented repository plan against AGENTS.md, architecture, the immutable plan, implementation commits, real runtime behavior, verification evidence, and downstream contracts. Use when the user invokes the host-specific mine-plan-review skill with a plan…