$effect not running in this case

[moonlitgrace]

so I've this code:

<script lang="ts">
  let {
    speed = 1,
    ...
  }: Props = $props();
  let dotLottie: DotLottie | undefined = $state();

  $effect(() => { // this effect is not running whenever `speed` changes
    if (dotLottie && dotLottie.isLoaded && typeof speed == 'number') {
      dotLottie.setSpeed(speed);
    }
  });

  $inspect(speed); // this logs every changes to `speed`
</script>

but if i add a reference like:

  $effect(() => {
    console.log(speed); // now effect runs because of this
    if (dotLottie && dotLottie.isLoaded && typeof speed == 'number') {
      dotLottie.setSpeed(speed);
    }
  });
</script>

any idea why its not working in the first code?

[brunnerh]

Dependencies are captured at effect run-time and speed is not used when the effect runs initially.

dotLottie.isLoaded is probably not reactive and the && causes typeof speed to never be evaluated here since this is a short circuit logical operator (if the left side is falsy, the right side is skipped).

If isLoaded were reactive and changed to true, this would work since then the entire if condition would be evaluated. If the DotLottie object is a third party class, you may have to add some additional logic to re-trigger the $effect on load.

See also this issue for more context:

• Proposal: a way to make non-POJOs reactive #10560

As a workaround, you can switch around the order of the operators and move the speed check to the front if you don't need the effect to retrigger when isLoaded changes from false to true. (One generally should not rely on operator order, though, since this can easily be messed up again in some later change or refactoring.)

[moonlitgrace]

thank you @brunnerh for explaining it.
never thought ordering matters for effect. fixed by moving speed check to front 🚀