Know which value is shared
An array can be referenced by a component, a cache and another variable at the same time. Changing it through one reference changes what every owner observes. Immutable updating means producing a new value for the changed result while preserving the previous value. It is especially useful when a UI framework compares references to decide whether something has changed.
Add and remove with an explicit result
For a task list, create an added list with a spread and the new task rather than pushing into the original state. Remove a task by filtering on its stable identifier. Keep identifier generation outside repeated render calculations. The important part is that a previous list remains a valid description of the earlier screen, which makes reasoning about undo and debugging easier.
Replace the matching record
Suppose task t-42 changes from open to done. Map over the list and return a new object for that identifier, while returning unchanged objects for other entries. Replacing only the array but mutating the existing task object still changes data shared with earlier snapshots. Copy each level on the path you modify, including a nested settings object if that is where the edit lives.
Handle ordering without surprises
Traditional sort and reverse methods modify their array. Copy before calling them when the input must remain intact, or use suitable copying alternatives supported by your browser target. Keep sorting rules separate from filtering rules so each operation can be inspected. For display-only ordering, derive the sorted list from source records instead of storing several competing versions of the same collection.
Avoid copying everything blindly
A complete deep clone on every keystroke can waste work and can mishandle values with special behavior. Prefer a targeted update that changes the necessary branches and preserves untouched references. If nested state becomes difficult to update safely, reconsider its structure. Storing records by identifier can make a single-row edit easier to express than repeatedly searching a deeply nested screen-shaped object.
Verify previous snapshots stay unchanged
Create a small input list, run an update, and inspect both the old and new values. Assert that the edited record differs, untouched records retain their identity where intended, and the previous record still has its original fields. Include a missing-identifier case and duplicate identifiers in review. These checks reveal data ownership mistakes that a visually correct first render can hide.
Further reading
Put the idea to work.
Explore free browser tools for images, text and developer workflows.