Immutability and Structural Sharing

Immutability and Structural Sharing

React relies on reference equality to detect changes. Mutating state directly breaks this — React can’t see the change and skips the re-render. Structural sharing is how you update immutably without copying the entire state tree.

Why Immutability

// Bug: mutating state directly
const [items, setItems] = useState([{ id: 1, name: "Apple" }]);

function updateItem(name) {
  items[0].name = name; // mutates the existing array
  setItems(items); // same reference — React bails out, no re-render
}

React compares prevState === nextState. Same reference → equal → no render.

Correct Update Patterns

Create new references for changed parts only:

// Update a field in an object
setUser((prev) => ({ ...prev, name: "Alice" }));

// Add to an array
setItems((prev) => [...prev, newItem]);

// Remove from an array
setItems((prev) => prev.filter((item) => item.id !== idToRemove));

// Update one item in an array
setItems((prev) =>
  prev.map((item) =>
    item.id === targetId ? { ...item, name: "Updated" } : item,
  ),
);

Structural Sharing

You don’t copy everything — only the parts that changed. Unchanged subtrees keep their original references.

const state = {
  users: [
    { id: 1, name: "Alice" },
    { id: 2, name: "Bob" },
  ],
  settings: { theme: "dark" },
};

// Update only user 1's name
const nextState = {
  ...state, // settings keeps the same reference
  users: state.users.map(
    (u) => (u.id === 1 ? { ...u, name: "Alicia" } : u), // user 2 keeps same reference
  ),
};

nextState.settings === state.settings; // true — reused
nextState.users[1] === state.users[1]; // true — reused

Unchanged references allow React.memo and useMemo to skip re-renders for those subtrees.

Deep Nesting

Immutable updates on deeply nested state are verbose:

const next = {
  ...state,
  a: {
    ...state.a,
    b: {
      ...state.a.b,
      value: "new",
    },
  },
};

Use Immer to write mutable-looking code that produces immutable results:

import produce from "immer";

const next = produce(state, (draft) => {
  draft.a.b.value = "new"; // Immer handles the copying
});

useImmer integrates this with useState directly.

---