Improve clarify of documentation around reactivity / $: operator when using function calls

[rlaferla]

Svelte is inconsistent when it comes to reactivity for variables and functions. As a relative newcomer to Svelte, this has been my #1 struggle. I don't think I'm alone.

PROBLEM: When you refer to a variable, it's reactive. But when you refer to a function, it's not. It's only called once.

It has been surmised in the support channel, that this could be a design issue that was made due to performance issues. If that is the case, is there not a way (in a future version) to mark a function as reactive vs. non-reactive (called once.) Or is there a different approach to this using the current version? If so, this needs to be in the tutorial.

Example:
https://svelte.dev/repl/7f0bf62d89c34b43b4ad5d0c21f0a5ab?version=3.17.2

Also, I can get it to work in this (with a caveat):
https://svelte.dev/repl/faf860418fe645abb75e6abd1eb89b96?version=3.17.2

The caveat being that if you change:

  $: checkTrue = () => {
		console.log("checkTrue()");
		return variable;
	}

to

  $: checkTrue = () => {
		console.log("checkTrue()");
		return isTrue();
	}

it no longer works.

[vipero07]

Inside the reactive statement you need to reference the variable that the function is dependent on. That's why there is possible performance issues with your example. E.G. $: callfunc = isTrue() && variable; fixes your issue. As would $: callfunc = isTrue(variable);. Alternatively per the tutorial:

$: {
	variable;
	isTrue();
}

Not having that variable inside the reactive declaration would be similar to using a react hook useCallback or useEffect without the dependency array if the function was always run.

I don't think this is an inconsistency, though I do believe it should be made more clear or explicit in the documentation.

It is probably possible for the compiler to figure out the dependencies, but this would require it reading into each function and with one level of depth it isn't bad but the deeper the function rabbit hole goes, the worse it is.

This is also why your second example works with variable inside the reactive declaration, and not when it calls another function.

A more idiomatic approach though, the function you are calling (isTrue) should itself accept the dependencies that it relies on making the function an idempotent function. This would also fix the issue.

let variable = true;
$: callfunc = isTrue(variable);
function isTrue(test) {
	console.log("isTrue()");
	return test === true;
}

[rlaferla]

Thanks, I now understand this and I like your idiomatic approach. However, I don't see this in the tutorial. Can we mark this as "docs" instead of "question" even though it's a bit of both, the result should be an update to the tutorial?

[vipero07]

Forgot to link, the api docs do mention it only updates when the values that are depended on update. However, it still should probably be made more explicit that the dependencies of dependencies aren't accounted for.

[rlaferla]

Thanks. I'm still a newcomer to Svelte. I think the tutorial is where fundamental concepts should be explained wheres the reference docs should be for details. In particular, I think there needs to be some visual diagrams and conceptual documentation about when and how reactivity gets evaluated.

[pngwn]

The behaviour in the issue is by design but explaining how reactivity works and different approaches are definitely on the cards. I actually have a document doing pretty much that, though it needs some work. Probably something for the cookbook/guides section.

[jchidley]

I have recently been tinkering with Svelte and this issue, function calls being triggered once only, has been really difficult to grasp. I have only now just understood this because I have read the following information:

Advanced Svelte: Reactivity, lifecycle, accessibility
add example for reactive declaration with a function? #4785
Explicit dependencies for reactive statements + Syntax proposal or Docs update #5615

In my case, I have been looking at closures and how I might use this to protect private date. Obviously, by design, Svelte will not see private data. Hence the need for an external flag to trigger reactivity.

In my example, below, clearly I could have programmed things differently (i.e. sum doesn't need to be a private function or could be reworked as a pure function).

<script>
	let nums = numberAdder();
	let numUpdate = 0;

	function numberAdder() {
		let n = [1];
		return {
			add: function () {
				n = [...n, n.length + 1];
				numUpdate++;
			},
			joinedUp: function () {
				let joined = n.join(" + ");
				return joined;
			},
			sum: function () {
				let summed = n.reduce((acc, cur) => acc + cur, 0);
				return summed;
			},
		};	
	}
</script>

<main>
	<button on:click={nums.add}>numberAdder</button>
	<p>{nums.joinedUp(numUpdate)} = {nums.sum(numUpdate	)}</p>
</main>

[dummdidumm]

https://svelte.dev/docs#component-format-script-3-$-marks-a-statement-as-reactive has information on that for a while now, I think that this line makes it clear: "Only values which directly appear within the $: block will become dependencies of the reactive statement. For example, in the code below total will only update when x changes, but not y"

I'm inclined to therefore close this issue, leaving it open for a few more weeks for others to chime in.

[jchidley]

This issue has been open for over 2 years and I have been following the Tutorial recently. It wasn't obvious how to deal with Svelte's particular take on reactivity. I have been messing around with it (reactivity) and thinking about it for several days. How many other newbies will be prepared to do this?

The way that Svelte deals with reactivity is fundamental to its design: it still isn't clear to newcomers, like me, how it works.

[alexamy]

Looks like api chapter $: marks a statement as reactive describes all the cases.

[dummdidumm]

Yes, thank you for reminding me to close this 👍 It now also has code examples so it should be sufficiently clear.