Site: Explain which variables can be assigned to to trigger updates

[Conduitry]

There have been a number of issues opened about this, and a good deal of confusion. The docs indicate that if you mutate an object without there being a = involved, this doesn't trigger an update. But there's no mention that only assignments to certain variables trigger updates.

Things that do trigger updates:

• Assignments to top-level variables in the component
• Assignments in inline event handlers to the contextual item in an array from an each block (There are some nuances to be worked out around this, and some bugs, for which there are other issues open)

Other assignments do not trigger updates. In particular, assignments to function arguments when the function was passed one of the above two things do not trigger updates. If you have two top-level variables, and one is an array or object containing the other, and you trigger an update on the contained variable, it does not trigger an update on the containing variable.

I do not know where in the docs we should explain this, or how we should word it, but we do need to have this somewhere.

[hepiBatman]

I got the impression from https://svelte.dev/tutorial/updating-arrays-and-objects since I came from React and Vue background, list = list never crosses to my mind.

[ericmdantas]

So, I was just testing #3373 a bit further and found something interesting.

When using a method in a top-level object to modify its state, such object isn't updated either. Here's a simple example (REPL):

<script>
	let person = {
		name: '',
		changeMyName() {
			this.name = 'wat'
		}
	}
	
	function handler() {
		// doesn't update the object
		person.changeMyName()
		
		// does update the object
		person.name = 'ok'
	}
</script>

<form>	
	<button type="button" on:click={handler}>Change my name</button>
	
	<pre>{JSON.stringify(person)}</pre>
</form>

This one caught me by surprise as well.

[hepiBatman]

yeah, until you put person = person to the handler, it seems object = object is the norm in svelte. It would be great if it can automatically understands this like Vue.

Separate issue, REPL does not allow user to update REPL on mobile, it keeps deleting the typed character.

[hepiBatman]

To answer the original post, can we have a page like Vue does (https://vuejs.org/v2/guide/reactivity.html) where svelte reactivity can be explain and the above explanation can be placed.

[TylerRick]

Reminder to mention this caveat ($: reactive blocks are batched), and possible workaround, as mentioned in
#4586 (comment):

For performance reasons, $: reactive blocks are batched up and run in the next microtask. This is the expected behavior. This is one of the things that we should talk about when we figure out how and where we want to have a section in the docs that goes into more details about reactivity.

If you want something that updates synchronously and depends on another value, you can use a derived store: ...

[TylerRick]

An even more confusing behavior (which I believe should be considered a bug) is this one: #5190

If that one somehow ends up being deemed an intended behavior rather than a bug, then it should definitely get explained in the docs too.