Function effect

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

Example:

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

// Triggers re-execution of the effect (with a minimal delay), prints "1"
count.value = 1;
Copy

effect 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 = effect(() => {
    // ...
});
// later:
handle.destroy();
Copy

You can also return a function from your effect callback. It will be called automatically when either the effect will be re-executed or when the effect is being destroyed. This can be very convenient to revert (or clean up) the side effects made by an effect:

effect(() => {
    const job = startAJob();
    return () => job.stop();
});
Copy

NOTE: This function will slightly defer re-executions of the given callback. In other words, the re-execution does not happen immediately after a reactive dependency changed. This is done to avoid redundant executions as a result of many fine-grained changes.

If you need more control, take a look at syncEffect.