Function syncEffect

Runs the callback function and tracks its reactive dependencies. Whenever one of those dependencies changes, the callback will be executed again.

This function is the synchronous variant of effect. It will re-execute after every fine grained change, even if they occur in immediate succession. syncEffect should therefore be considered a low level primitive, for most use cases effect should be the right tool instead.

Example:

const count = reactive(0);
syncEffect(() => {
    console.log(count.value);
});
// Effect runs immediately, prints "0"

count.value = 1; // Effect runs again, prints "1"
count.value = 2; // Effect runs again, prints "2"
Copy

syncEffect returns a handle that allows you to unsubscribe from changes. That handle's destroy() function should be called in order to clean up the effect when you no longer need it, otherwise the effect will keep running forever:

const handle = syncEffect(() => {
    // ...
});
// later:
handle.destroy();
Copy