$effect doesn't track state changes without direct reference in body

[moonlitgrace]

$effect doesn't react to state changes unless there is a direct reference to state inside effect body. here is a minimal example.

$effect(() => {
    if (dotLottie && dotLottie.isLoaded && typeof speed == 'number') {
        dotLottie.setSpeed(speed);
    }
});

in this case, dotLottie.setSpeed(speed) doesn't run whenever speed changes, however, when adding a direct reference to speed, effect starts working as expected, like.

$effect(() => {
    const _speed = speed;
    if (dotLottie && dotLottie.isLoaded && typeof _speed == 'number') {
        dotLottie.setSpeed(_speed);
    }
});

[adiguba]

Hello,

What is dotLottie && dotLottie.isLoaded ?
Is it reactive ?

If not seem normal to me when it's falsy : there no reactive statement run so the effect will not be called again...

[moonlitgrace]

What is dotLottie && dotLottie.isLoaded ?
Is it reactive ?

dotLottie is a state, but not reactive in this case.

let dotLottie: DotLottie | undefined = $state();

speed is the reactive one here.

let {
  ...
  speed = 1,
  ...
}: Props = $props();

so, i need that effect to be fired whenever speed changes.
if i can do it without making another (direct) reference inside it, much better.

EDIT:
declaring speed as a standalone works too, like:
(this is prolly a bad practice ig)

$effect(() => {
  speed;
  if (dotLottie && dotLottie.isLoaded && typeof speed == 'number') {
    dotLottie.setSpeed(speed);
  }
});

[moonlitgrace]

hi @adiguba, anything you know would help :) I'm just wondering if this is how it is done, or any other better ways.

[moonlitgrace]

fixed my moving speed checking in condition to front.
thanks to #14517 (comment)