Right way to track changes in reactive arrays or js objects?

[frozenBranch]

Hi, I'm getting started with Svelte 5 and I've been struggling on finding the proper way to track reactive arrays of objects and objects.

I'll show the first approach I tried, I read that this is not expected to work, and instead I should be accessing each property of each element in the array to be able to track it's single reactivity.
In this example, each time the input x.c changes, the effect doesn't rerun.

<script lang="ts">
	let example = $state([{
		a: 1,
		b: 2,
		c: 'something'
	}])
	$effect(()=>{
		example
		console.log('here')
	})
</script>

{#each example as x}
	<input bind:value={x.c}/>
	<input bind:value={x.b}/>
{/each}

But what happens if I want to be able to execute some code if any of all the fields of all the elements changed?
I know that using JSON.stringify(example) inside the effect will make it trigger each time anything changes, but that approach doesn't feel right, isn't there a better way to do it?

[brunnerh]

What code are you trying to run?

If you access relevant data on the object, the effect will run automatically. It should be relatively rare that code is supposed to run without even looking at the data whose change is triggering it.

(Also, the category of this should probably be "Q&A".)

[frozenBranch]

Let's say I have a 2d array of objects that will represent a table of inputs in the UI.
Then when rendering, I iterate the array to render each cell of the table. Each cell is bound to one property of each object of each array.

I want to trigger some action whenever there is a change to any cell.

Example:

<script>
    const table = $state([
      [{ value: 'A1' }, { value: 'A2' }],
      [{ value: 'B1' }, { value: 'B2' }]
    ]);
  
    $effect(() => {
	// this is not triggering each time any cell-input is modified
        table
	console.log('here')
    });
  </script>
  
  <table>
    {#each table as row, i}
      <tr>
        {#each row as cell, j}
          <td>
            <input bind:value={cell.value} />
          </td>
        {/each}
      </tr>
    {/each}
  </table>

[brunnerh]

I get the idea, but what exactly is the action, when it does not need any of the data?

[frozenBranch]

Not sure if I'm following your question, but for example I'd like to save the data in some external place like a db or cache.

Something like:

$effect(() => {
        // I want to trigger this everytime the user makes any change to any cell in the table
	saveTableData(table)
    });

Is there a preferred way to do this?

[brunnerh]

If you save the data, you have to read the data, reading the data creates $effect dependencies on the data, i.e. the $effect will trigger if you actually implement the logic you intend to implement.

[frozenBranch]

Thanks for your answer