How to update a value inside an array?

[Telokis]

What is the proper way to update a specific value inside an array without knowing its index?

I'm migrating to Valtio and I was doing it like so:

        receivedSpellReducer: (
            state: SpellState,
            payload: SerializedSpell,
        ): SpellState => ({
            ...state,
            spells: state.spells.map((spell) =>
                spell.id === payload.id ? payload : spell,
            ),
        })

As you can see, I create a whole new array. I'm guessing this will be considered as an update of the whole thing.
Is it possible to make it trigger an update only for a single element?

For example, if I were to perform a findIndex and then spells[foundIndex] = newSpell?

Trying to figure out the best practice for this case.

(More generally, I think arrays are specific enough that a dedicated section in the docs would be quite welcome and useful.)

Thanks in advance for answering me!

[dai-shi]

What is the proper way to update a specific value inside an array without knowing its index?

Good question.

I'm migrating to Valtio and I was doing it like so:

        receivedSpellReducer: (
            state: SpellState,
            payload: SerializedSpell,
        ): SpellState => ({
            ...state,
            spells: state.spells.map((spell) =>
                spell.id === payload.id ? payload : spell,
            ),
        })

As you can see, I create a whole new array. I'm guessing this will be considered as an update of the whole thing. Is it possible to make it trigger an update only for a single element?

This is actually fine in terms of fine-grained re-renders.
As long as you subscribe (or useSnapshot) to the entire array, it should work without any issues.

For example, if I were to perform a findIndex and then spells[foundIndex] = newSpell?

I would do that. I don't have other patterns. Wonder if anyone has other ideas.

Trying to figure out the best practice for this case.

(More generally, I think arrays are specific enough that a dedicated section in the docs would be quite welcome and useful.)

That's a great idea. Let's create a wiki page. Would you like to work on it?
Something like https://github.com/pmndrs/valtio/wiki/How-to-deal-with-arrays ?

Thanks in advance for answering me!

You are welcome!

[Telokis]

Thank you for the answer!

I ended up making a CodeSandBox in order to test the different possibilities I had.

My conclusion is that even though the findIndex-based solution should be better, it doesn't really matter when it comes to Valtio because it will "bubble-up" the event. (Which is obviously the proper behavior)

My initial hope was to only re-render the child that was updated but it's not possible. Not because of Valtio but because of the way React itself behaves.

Since Valtio will bubble-up anyway, my conclusion is to use the map-based solution. This is the safest option because it will reflect Valtio's behavior in a way that React can also catch on.
I'm afraid simply replacing the element without creating a new array could cause React.memo to think the array didn't change at all. I know Valtio will force a re-render thanks to useSnapshot but I don't want anyone to rely on this behavior for this specific case since it can backfire at a later time.

Regarding the wiki page, it's a good idea but I don't really feel like redacting a structured page. Maybe this issue + my sandbox can be a good placeholder until someone feels like making the page?

[dai-shi]

Sounds good.

Just a little correction: valtio not only bubbles up the event, but also creates a new array on snapshot. It's safe to mutate array items, from the React perspective too.

const state = proxy({ arr: [{ id: 1, text: 'hello' }, { id: 2, text: 'world' }] })

const snapArr1 = snapshot(state.arr)

state.arr[1].text = 'react'

const snapArr2 = snapshot(state.arr)

snapArr1 !== snapArr2 // is true

[Telokis]

Thanks but what about the following, though?
That's the case I was thinking about in the part you mentioned

const state = proxy({ arr: [{ id: 1, text: 'hello' }, { id: 2, text: 'world' }] })

const snap1 = snapshot(state)

state.arr[1].text = 'react'

const snap2 = snapshot(state)

snap1 !== snap2 // is it true?

[dai-shi]

Yes, it's still true.

[DennisSmolek]

This is a good discussion for docs, I've saved it, so I think it's safe to close this.. (now or when the docs go up is fine too)

[idanz]

First of, I want to say this is awesome tech and we are migrating to it from jotai and very excited about it.

On this discussion topic though, I disagree with "My initial hope was to only re-render the child that was updated but it's not possible. Not because of Valtio but because of the way React itself behaves"

React renders down, not up and not sideways so if I have a very big nested state with many nested components accordingly, this means every time each element in the bottom changes it will make my entire page rerender from the top level array. This would be a disaster for me, even more so when considering the whole point was to avoid uneeded renders.

However, valtio awesomeness can make it work exactly like I want it, it just took me some time to understand how. There's a related topic that's lacking in the docs for me which is how to work with nested components and valtio.

If that is welcome, I'll be happy to give a go at writing that wiki page, I can also show the "right" and "wrong" using codesandbox and show how the render count is different for different implementations

[Telokis]

@idanz Hi and thanks for your message!

I think it would be nice if you could elaborate. Maybe write a big comment detailing what you are thinking about and this comment may be upgraded to a wiki page one day!

[idanz]

Sure thing, I'll write a draft here in a couple of days. The first item is how to work with nested components and then to show that arrays are just a special case of nesting and work just as well.
I'll do both with "right" and "wrong" examples to show the difference in render count and you can let me know what you think

[idanz]

Hey so I came up with a draft that is all inside this csb: https://codesandbox.io/s/handling-nesting-and-arrays-in-valtio-hoe3j4?file=/src/App.js
please let me know what you think

[idanz]

@dai-shi @Telokis any feedback on the above?

[dai-shi]

@idanz It looks good (disclosure: I just glimpsed it). Nice work!
The point is child components should receive state in props, and parent component should take the state keeping it reactive&efficient (using snap somehow), right?
Yeah, it's worth documenting.

ping @RikuVan for another review.

[idanz]

Yes there's a few points there, specifically for the map array of objects to child components, how to avoid many renders in complex objects etc.
For me this is critical to handle big complex forms of large nested objects which is something I think valtio really shines on when used this way

[idanz]

@dai-shi it's been some time, anything I can do to help push this forward? really just looking to support to project

[dai-shi]

You can summarize you idea here. Or, directly create a new doc and open a PR. I think the example should be more simplified.