Untracked state in Valtio?

[esamattis]

Lets say I have huge data array with complicated nested objects I fetch from http and I want to filter it using the state in valtio.

Like

const state = proxy({ showType: "foo", data: [] });

async getData() {
    const res = await fetch(...)
    state.data = (await res.json()).data
}

function Component() {
    const snap = useSnapshot();
    
    return (
        <ul>
            {snap.data.filter(item => item.type === snap.type).map(item =>{
                return <li>{item.title}</li>
            })}
        </ul>
    )
}

I never modify modify data content but do replace it with the getData() function as a whole.

Can Valtio cause meaningful overhead since it will deeply wrap the data array with proxies. If so, is somehow possible to avoid that? Since in this case the render and mutation tracking should be enough at the .data level.

Thanks.

[dai-shi]

Yes, use ref().

async getData() {
    const res = await fetch(...)
    state.data = ref((await res.json()).data)
}

[esamattis]

I must be blind for having missed that from the readme 🤦

Thank you for creating this awesome tool 🤩