I have an object that I loop over with an each block. When I hover, I temporarily change a property on the actual object entry and use it to assign a class. This works fine, but it also causes other reactivity to be triggered unnecessarily often.

<script>
    let things = [
        { id: 1, name: 'apple' },
        { id: 2, name: 'banana' },
        { id: 3, name: 'carrot' },
        { id: 4, name: 'doughnut' },
        { id: 5, name: 'egg' },
    ];
    
    function makePretty(somethings) {
        const prettyThings = somethings.map(thing => thing.name).join(' ');
        console.log(prettyThings);
        return prettyThings;
    }
    
    $: prettyThings = makePretty(things)
</script>

<ul>
{#each things as thing (thing.id)}
    <li 
            class:hover={thing.hover}
            on:mouseenter={() => (thing.hover = true)}
            on:mouseleave={() => (thing.hover = false)}
    >
        {thing.name}
    </li>
{/each}
</ul>

<style>
    .hover {
        background-color: cyan;
    }
</style>

REPL: https://svelte.dev/repl/c658cccd0bc2471a8f9c4758387340c5?version=3.48.0 n the console, you can see how often the reactivity on the prettyThings is triggered when you move over the list with your mouse.

I do realise that this is expected behaviour, as the 'things'-object is effectively changed on every mouseenter and mouseleave. And thus the prettyThings is called every time.

What would be an ideomatic way to apply a hover to a 'row' from an array of objects, without changing the object itself? In doing so, the object should still be live modifiable by other operations (e.g. add, delete, ...).