How do you update Svelte arrays and objects to trigger reactivity?

WHAT THIS TESTS: This question checks whether you understand the difference between shallow and deep reactivity in modern Svelte, specifically the Svelte 5 runes model. Interviewers want to see if you know that the $state rune creates a reactive proxy that intercepts mutations, or if you are still thinking in terms of older Svelte patterns where only assignment triggered updates.

A GOOD ANSWER COVERS: First, declare the array or object with the $state rune so Svelte wraps it in a proxy. Second, explain that once wrapped, native mutations such as push, pop, splice, or direct property assignment automatically trigger reactivity because the proxy intercepts the operation. Third, note a critical caveat from the documentation: mutations to the proxy do not mutate the original object, so the proxy and the original are decoupled. Fourth, acknowledge that in legacy Svelte without runes, you must use reassignment such as assigning the variable to itself or using spread syntax to force an update.

COMMON WRONG ANSWERS: Claiming that push never triggers reactivity in any version of Svelte is the biggest red flag. Another mistake is suggesting self-assignment or spread reassignment as the primary or only solution in Svelte 5, which reveals unfamiliarity with runes and deep reactivity. Confusing Vue's reactivity system with Svelte's proxy implementation is also a signal of shallow knowledge.

LIKELY FOLLOW-UPS: An interviewer might ask what happens if you pass a non-proxied array into a $state declaration, or how deep reactivity handles nested objects and arrays. They may also ask about performance implications of proxy-based observation versus explicit reassignment, or how to opt out of deep reactivity if you need fine-grained control.

ONE CONCRETE EXAMPLE: Suppose you initialize a reactive array with let numbers equal $state and an array containing one, two, and three. In your addNumber function, you can write numbers dot push with numbers dot length plus one, and the user interface updates immediately. If you had instead declared numbers as a plain array without $state, the same push call would not update the view, and you would need to reassign the variable to itself or use spread syntax to trigger reactivity.

Source: svelte.dev