fp-immutable_skill

Overview

This skill teaches practical immutability patterns in TypeScript: spread operators for arrays and objects, nested updates, readonly types, and pragmatic cases where mutation is acceptable. It focuses on patterns that are easy to apply in real projects, plus small helpers and when to reach for Immer for complex updates. Expect clear examples for common tasks like toggling items, merging defaults, and cloning with modifications.

How this skill works

The skill explains how to create new values instead of mutating existing ones using spread, slice, map, and filter for arrays and objects. It shows how nested state requires spreading each level, offers a simple updateIn helper for path-based updates, and demonstrates using readonly types or Object.freeze for compile-time or runtime immutability. For complex nested edits it recommends Immer so you can write mutable-looking code that produces immutable results.

When to use it

• When you need predictable state history (undo/redo, debugging).
• When React/Redux change detection relies on reference equality.
• When preventing side effects across modules or functions.
• When building configs or defaults that should not change.
• When profiling shows mutation is a necessary optimization.

Best practices

• Prefer shallow spread for simple updates; spread every level for deep updates or use Immer.
• Use map/filter/slice for array edits to preserve immutability and clear intent.
• Use readonly types for compile-time guarantees and Object.freeze for a shallow runtime safeguard.
• Mutate only local, short-lived variables or performance-critical buffers after profiling.
• Deep clone arrays/objects when returning modified copies that share nested structures.

Example use cases

• Toggle a todo item by id using todos.map and {...todo, done: !todo.done}.
• Update deeply nested settings by spreading each nested object or with a small updateIn helper.
• Merge user-supplied overrides into a defaults object with {...defaults, ...overrides}.
• Clone an order and adjust items/metadata while deep-cloning nested arrays and maps.
• Use Immer in React to simplify complex state updates while keeping results immutable.