Why doesn't Svelte record signals individually?

I'm wondering about internals of Svelte to properly design my application to have maximum efficiency (I may deal with (tens?) of thousands of elements to update, so efficiently does matter), notably with how reactivity is implemented. So using this small example (on the link you can inspect the JS code on the right tab), I implemented this basic code:

<script>
    let foo = $state(42);
    let bar = $state(52);
</script>

<div onclick={() => foo = foo + 2}>
    Hello {foo}
</div>
<span onclick={() => bar = bar + 1}>
    Hello {bar}
</span>

and I get the following compiled JavaScript:

import 'svelte/internal/disclose-version';
import * as $ from 'svelte/internal/client';

var on_click = (_, foo) => $.set(foo, $.get(foo) + 2);
var on_click_1 = (__1, bar) => $.set(bar, $.get(bar) + 1);
var root = $.template(`<div> </div> <span> </span>`, 1);

export default function App($$anchor) {
    let foo = $.state(42);
    let bar = $.state(52);
    var fragment = root();
    var div = $.first_child(fragment);

    div.__click = [on_click, foo];

    var text = $.child(div);

    $.reset(div);

    var span = $.sibling(div, 2);

    span.__click = [on_click_1, bar];

    var text_1 = $.child(span);

    $.reset(span);

    $.template_effect(() => {
        $.set_text(text, `Hello ${$.get(foo) ?? ''}`);
        $.set_text(text_1, `Hello ${$.get(bar) ?? ''}`);
    });

    $.append($$anchor, fragment);
}

$.delegate(['click']);

What seems to be important is the code:

    $.template_effect(() => {
        $.set_text(text, `Hello ${$.get(foo) ?? ''}`);
        $.set_text(text_1, `Hello ${$.get(bar) ?? ''}`);
    });

If my understanding of signals is correct (I followed this great post to understand how signals are implemented), this will run the callback function every time a signal changes inside… but the issue is that if bar changes, the code $.set_text(text, `Hello ${$.get(foo) ?? ''}`); will also change, i.e. changing one signal triggers O(n) operations where n is the number of signals… With 2 elements this is not much, but if I have ten of thousands of elements, I'm afraid to have a non-negligible update time.

So I have two questions:

1. Why doesn't Svelte implement one callback per signal to have a O(1) complexity independent of the number of signals?
2. Also, is the same idea followed by observable? My ultimate goal is to understand the complexity of updates in Dexie.js's liveQuery observable.

Adding many individual effects comes with its own significant overhead, so updates are batched instead. Svelte also does not batch everything in the component, e.g. if you add an #each, then every item gets its own template effect.

The given code will not cause any redundant DOM updates either. The set_text code will check whether the value actually changed and only interact with the content if it really has to.

I cannot comment on Dexie.js or anything relating to observables, please ask separate questions.