Drills Repository
16 Drills · All Belts · immutability
Array mutation with push
Mutating methods like push() change an array in place without creating a new reference. React only re-renders when state receives a new reference, so mutating artists directly leaves React unaware anything changed.
Choosing a Safe Array Update Method
slice() creates a copy of part or all of an array without mutating the original. Methods like splice(), pop(), and reverse() mutate the existing array, which can break React's immutable state expectations.
Removing an Item From Array State
Array.prototype.filter() builds an entirely new array containing only the elements that satisfy a condition, leaving the original array untouched. Calling todos.filter(t => t.id !== todoId) returns a fresh array without the removed to-do, giving React the new reference it needs to re-render.
Mutating object state directly
React state must be treated as immutable, since React detects updates by comparing references, not by inspecting values. Mutating the existing object keeps the same reference, so React never registers a change and skips re-rendering.
setPlayer Called With A Partial Object
State setters returned by useState replace the entire stored value rather than shallow-merging it the way class component setState once did. Since the new object contains only lastName, every other field on the previous state object is lost.
Updating a Single Item in Array State
Array.prototype.map() builds a new array instead of mutating the original, replacing just the matching element with an updated copy while every other element keeps its existing reference. That lets a component update a single object inside array state by returning a new array with only the target item replaced.
Reversing an Array Stored in State
Methods like reverse() mutate arrays, so React state should first be copied using spread syntax or another non-mutating technique. Mutating the copied array is safe because it is a fresh object not shared with existing state.
Which Mutation Pattern Is Safe In React
Mutating a freshly created object is safe because no other code references it yet. Problems occur when existing state, props, or shared objects are mutated because React relies on immutable snapshots and reference comparisons.
Object Spread With Nested Property Mutation
Object spread syntax copies only an object's top-level properties, leaving any nested objects as shared references between the original and the copy. Here, mutating person.artwork.city after spreading still changes the original person object, since person.artwork was never copied.
Updating nested object state correctly
Updating nested state immutably requires creating new copies at every level along the changed path. Spreading both the nested artwork object and its parent object preserves all unrelated fields while replacing only the modified data.
Comparing Letters After Array Remapping
Immutable array updates create brand-new object references for every item, so a freshly mapped object is no longer strictly equal to the object that was previously stored. Here, letter === highlightedLetter fails after mapping because the objects' identities changed, even though the same logical letter is still selected; comparing stable IDs instead would keep the highlight correct.
Set mutation in React state
React state updates rely on reference identity comparisons, so mutating an existing object or Set in place leaves the reference unchanged and React may treat the state as unmodified. Here, calling selectedIds.add(id) mutates the same Set before setSelectedIds(selectedIds) runs, so the reference passed to React never actually changes and no re-render occurs.