Search code examples
reactive-programmingsvelte

How to prevent Svelte triggering reactive changes when the value hasn't changed?


In this example, someValue is assigned the result of a ternary expression.

Regardless of whether someIndex is used, it is triggering reactive change to someValue when I don't want it to.

Is there any way to only trigger reactive changes to someValue if both someIndex changes and someBool is false?

<script>
    import { onMount } from "svelte";
    export let someBool = true;
    
    const someArray = [];
    const someObject = {};
    
    let someIndex = 0;
    let timesReacted = 0;
    
    $: someValue = someBool ? someObject : someArray[someIndex];
    $: someValue, timesReacted += 1;
        
    onMount(() => {
        const interval = setInterval(() => someIndex += 1, 1000);
        return () => clearInterval(interval);
    });
</script>

someValue reacted to changes {timesReacted} times

Solution

  • Would this work for you?

    let someValue, lastSomeIndex
    
    $: if (!someBool && someIndex !== lastSomeIndex) {
      someValue = someArray[someIndex]
      lastSomeIndex = someIndex
    }