Svelte 5: $state for bind:this

[ivenuss]

I would guess that I should use $state for bind:this, since el is by default undefined until the DOM is mounted aka. the state will be updated (is reactive) so $state would make sense.

I'd say I should use $state for bind:this, since el is undefined by default until the component is mounted. The state needs to be updated (it's reactive), so using $state would make sense to me.

In certain scenario I encountered this warning with using just let.

`%name%` is updated, but is not declared with `$state(...)`. Changing its value will not correctly trigger updates

Variants

With $state()

<script>
  let el = $state();
</script>

<div bind:this={el}></div>

Without $state()

<script>
  let el;
</script>

<div bind:this={el}></div>

[webJose]

Is there a question in your mind? I'll try to guess: Which should you use?

IMHO, so long you use el inside an effect or onMount(), and your logic doesn't destroy the bound element reactively (like inside an {#each} or {#if} block), you should be ok with a non-reactive variable.

If you just don't want to think about this so finely, just go with reactive state.

[ivenuss]

Yeah sorry if that wasn't clear enough. My question was which one should I use.