Reactive Side Effects with `$effect` | CodeSignal Learn

Reactive Side Effects with `$effect` | CodeSignal Learn

Introduction to Reactive Side Effects

Understanding the `$effect` Rune

Using `$effect` for Cleanup

When using $effect, it’s important to clean up after yourself to avoid memory leaks or unexpected behavior. For example, if you set up a timer using setInterval, you should clear it when it’s no longer needed. Here’s how you can do that: Svelte <script> let timeLeft = $state(10); let running = $state(false); $effect(() => {if (!running) return; const id = setInterval(() => {if (timeLeft > 0) {timeLeft -= 1;} else {running = false;}}, 1000); return () => {clearInterval(id); // Cleanup the interval};}); </script> <button onclick={() => running = true}>Start</button> <button onclick={() => running = false}>Stop</button> <p>Time left: {timeLeft}</p> In this example, the $effect rune sets up a timer that counts down from 10. When the timer is no longer needed (e.g., when the user clicks “Stop”), the cleanup function (clearInterval) is called to stop the timer. This ensures that your application doesn’t waste resources or behave unexpectedly. Cleanup is a crucial part of using $effect, and it’s something you’ll need to consider whenever you’re managing side effects. In the next section, we’ll explore how to use the untrack function to avoid unnecessary re-runs.

Sign up

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

The $effect rune is a key part of Svelte’s reactivity system. It allows you to run code whenever certain values change. Here’s a simple example to illustrate how it works:

Svelte

<script>
    let count = $state(0);

    $effect(() => {
        console.log(`Count is now: ${count}`);
    });
</script>

<button onclick={() => count++}>Increment</button>

In this example, every time the count variable changes, the $effect rune logs the new value to the console. The $effect rune automatically tracks dependencies, so you don’t need to manually specify which values to watch. This makes your code cleaner and easier to maintain.

The $effect rune is especially useful for managing side effects like timers, event listeners, or API calls. In the next section, we’ll explore how to use $effect for cleanup to prevent memory leaks or unwanted behavior.

Combining `$effect` with `untrack`

Sometimes, you might want to run code inside $effect without tracking dependencies. This is where the untrack function comes in. It allows you to run code without triggering a re-run of the $effect when the values change. Here’s an example: Svelte <script> import {untrack} from "svelte" let timeLeft = $state(10); let running = $state(false); let startCount = $state(0); $effect(() => {if (!running) return; const id = setInterval(() => {if (timeLeft > 0) {timeLeft -= 1;} else {running = false;}}, 1000); return () => {clearInterval(id);};}); $effect(() => {if (running) {untrack(() => {startCount++;});}}); </script> <button onclick={() => running = true}>Start</button> <button onclick={() => running = false}>Stop</button> <p>Time left: {timeLeft}</p> <p>Total starts: {startCount}</p> In this example, the untrack function is used to increment the startCount variable without triggering a re-run of the $effect . This is useful when you want to perform an action that doesn’t depend on the reactive state. By combining $effect with untrack, you can create more efficient and predictable code. In the next section, we’ll put everything together to build a complete countdown timer.

Building the Countdown Timer

Now that you understand the basics of $effect and untrack, let’s build a complete countdown timer. Here’s the code we’ll be working with: Svelte <script> let timeLeft = $state(10); let running = $state(false); let startCount = $state(0); $effect(() => {if (!running) return; const id = setInterval(() => {if (timeLeft > 0) {timeLeft -= 1;} else {running = false;}}, 1000); return () => {clearInterval(id);};}); $effect(() => {if (running) {untrack(() => {startCount++;});}}); </script> <h3>Countdown Timer</h3> <button onclick={() => running = true}>Start</button> <button onclick={() => running = false}>Stop</button> <button onclick={() => { timeLeft = 10; running = false; }}>Reset</button> <p>Time left: {timeLeft}</p> <p>Total starts: {startCount}</p> This code creates a countdown timer that starts at 10 seconds. The $effect rune manages the timer, and the untrack function increments the startCount variable without triggering a re-run. The timer can be started, stopped, and reset using the buttons. When you run this code, you’ll see the timer count down from 10, and the “Total starts” counter will increase each time you start the timer. This example demonstrates how to use $effect and untrack together to manage side effects and state in a Svelte application. Below is a preview of how the timer will look when running: