Bind value without reactivity

[karchung0930]

Is it valid and right to bind the value of an input to a variable without reactivity such as with $state(), then use this value later for a event:

let data = '';

function doSomething() {
    // Use the data here
}

<input bind:value={myData} onkeydown={doSomething}>

My question:

• What is the purpose of using a $state since I saw it everywhere in the doc, when (the circumstance) we will NOT need it. My understanding is to use it when we need to track the value is being changed and update the UI, is it correct?
• I have make a experiment to use the $derived() with th above example but it only works for the first time, the second onward it will keep using the value from first time:

let data = '';
let computedValue = $derived(data + ' and b');

<input bind:value={myData} onkeydown={doSomething}>

// First time as we type 'a', the computedValue is 'a and b'
// Then as we type b which the value now is 'ab', the computedValue is still 'a and b'

Unless here we make the data to be $state(), is that mean $derived will need to use with $state() for it to be working properly? If so, why?

[brunnerh]

$state is necessary for any reactivity, be it updating the UI, running an $effect or computing a $derived.

The $state fires change notifications which are required by $derived to know when the value needs to be recomputed; this is why your example will not work without $state.

If you are not using a value in any reactive context, e.g. only in some event callback, you can use a non-reactive variable for the binding. I probably would still not recommend doing this; code tends to change and chances are, you will need the reactivity at some point anyway; not having it may lead to buggy behavior/confusion if overlooked.