Skip to content
tezvyn:

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

Source: svelte.devEasyHow cards are made

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

This tests knowledge of Svelte 5 deep reactivity: $state wraps arrays in proxies so push and property mutations trigger updates. Mention $state first, then note legacy syntax needs reassignment. A red flag is claiming push never works in Svelte.

What's really being asked

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.

The full answer

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.

The mistakes people make

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.

What usually comes next

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.

A 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.

Interview question

In Svelte 5, you declare an array with let items = $state([1, 2]) and later call items.push(3). What is the result?

  • a.You must wrap the push call in an $effect rune to trigger the update
  • b.The compiler converts the push call into an immutable spread operation
  • c.The UI updates automatically because the array is wrapped in a reactive proxyCorrect
  • d.Nothing updates until you reassign the items variable to itself
Why?

In Svelte 5, the $state rune wraps arrays in proxies that intercept mutations like push, so the UI updates immediately without reassignment. Reassigning the variable to itself is a legacy pattern that is unnecessary when using runes.

Just read this? Test yourself on what you have been reading.

Read the original → svelte.dev

You just looked this up. Could you explain it out loud?

That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.

The iPhone app is on the way

We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.

Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.

Get it on Google PlayiPhone app coming soon

We are hiring for this. Open roles that interview on svelte — each one lists the topics its interview covers.

See open roles