SolidJS•2mo ago

How to modify array partially?

I'm using a store to store an array. I'm displaying that array in a For component. What I don't understand is how can I possibly use the "smart" feature of the For component, which only renders the changing part of the array. I mean all I can do in a store is setState(), where I put my full array in. So how can I possible send a partial update to a component? I see no way to push() at the end of an existing array in state or for example modify the last element of the array. What am I missing?

27 Replies

hyperknotOP•2mo ago

Is it possible that it's as simple as using reconcile? Does it do all the magical deduplication?

  setStreamingMarkdown(text: string) {
    const newTokens = getMarkdownTokens(text)
    this.setState('streamingMarkdownTokens', reconcile(newTokens))
  }

  setStreamingMarkdown(text: string) {
    const newTokens = getMarkdownTokens(text)
    this.setState('streamingMarkdownTokens', reconcile(newTokens))
  }

But how does it work? I mean how can reconcile compare two arrays if the only parameter it has is a single array?

REEEEE•2mo ago

reconcile would be the way to go. reconcile returns a function that takes in the previous state object. The store setter accepts a function as an argument where it provides you the previous value

setStore('streamingMarkdownToken', prevState => [...prevState, newItem])

setStore('streamingMarkdownToken', prevState => [...prevState, newItem])

Obviously creating a new array isn't ideal. You use reconcile here and it's equivalent to this

setStore('streamingMarkdownToken', prevState => reconcile(newTokens)(prevState))

setStore('streamingMarkdownToken', prevState => reconcile(newTokens)(prevState))

You can also use produce if you want to do mutation

setStore('streamingMarkdownTokens', produce(prevState => prevState.push(newItem)))

setStore('streamingMarkdownTokens', produce(prevState => prevState.push(newItem)))

hyperknotOP•2mo ago

I'm really happy with reconcile, basically it contains the same prefix matching algorithm which I was about to implement. It's super nice. One thing which isn't clear is it can take a key param. Is that totally optional? If my array consists of objects, does it do deep comparison if a key is not supplied?

REEEEE•2mo ago

I believe the key param is to uniquely identify objects by a property, the default key being id. Though I'm not 100% on that

peerreynders•2mo ago

If my array consists of objects, does it do deep comparison if a key is not supplied?

No. For arrays where the elements don't have a property to match the specified key (which defaults to "id" when not specified) elements are just correlated by array index. https://github.com/solidjs/solid/blob/29ab5bb1073b0f819b4bcd2022a66e1b9537f134/packages/solid/store/src/modifiers.ts#L102-L104 So in most cases simply inserting a new element in the middle of the array will defeat reconcile past that point, undermining its effectiveness.

GitHub

solid/packages/solid/store/src/modifiers.ts at 29ab5bb1073b0f819b4b...

A declarative, efficient, and flexible JavaScript library for building user interfaces. - solidjs/solid

hyperknotOP•2mo ago

I'm also reading the source code. What's interesting is that in my use case (streaming text, only the last section changes) it seems to work perfectly without supplying an id. And afaik the deep comparison happens because of the recursive nature of applyState

peerreynders•2mo ago

Well, if that's the case then it will probably work; however as the token list gets longer the deep comparison reconcile effort increases as well (especially if you (frequently) reconcile the entire list each time another token is appended; though it will probably take a while until it reaches React vDOM proportions).

hyperknotOP•2mo ago

These are not LLM tokens, but tokens from my markdown parser, so for example a full code block is a single token. I think there won't be too many of them in a single message of a normal chat conversation. I've looked into the keyed version, but I cannot generate real keys, only derived ones. For example I could make {type: 't', content: 'c'} into an ID: "t_c". But this will result in duplicates for example simple tokens like <hr/> will be repeated. So in conclusion, reading the code, I believe the non-keyed version will be perfect for my use case. What's left to understand is the connection between <For> and the reconcile/applyState.

peerreynders•2mo ago

Did you understand what I meant when I used the term "reference identity".

hyperknotOP•2mo ago

Not exactly. I know that signals are tracked through proxies, and I guess each item of an array proxy has it's own identity. I guess <For> uses these identities of the array proxy to check if a child-component needs an update or not.

peerreynders•2mo ago

const obj1 = { id: 1 };
const obj2 = { id: 1 };
console.log(obj1 === obj2); // false
console.log(obj1 === obj1); // true: reference identity
console.log(JSON.stringify(obj1) === JSON.stringify(obj2)); // true: value identity (kind of)

const obj1 = { id: 1 };
const obj2 = { id: 1 };
console.log(obj1 === obj2); // false
console.log(obj1 === obj1); // true: reference identity
console.log(JSON.stringify(obj1) === JSON.stringify(obj2)); // true: value identity (kind of)

hyperknotOP•2mo ago

OK, that's clear.

peerreynders•2mo ago

For doesn't really care about proxies. For each time it runs the item function remembers the reference of the item passed against the result. That way if you move the same items around in the list (between updates) it knows how to move the already rendered results around in the DOM. If a new item reference is encountered during an update/pass it runs the function and inserts the result into the DOM in the correct position. If an old item reference doesn't appear in the current update then the corresponding DOM fragment (and reactive context) is removed from the live DOM. So the aim with reconcile is to preserve the old item references where the new items are "value identical" so that For can just keep the old fragments, perhaps move them around rather than dropping the entire DOM section and then having to recreate all of them over again.

hyperknotOP•2mo ago

I see, so reconcile/applyState does a deep comparison, whereas For/mapArray only does a reference identity comparison. Which basically works as long as I use setState with 3 parameters or with reconcile.

peerreynders•2mo ago

It would even work in this case

setStore('streamingMarkdownToken', prevState => [...prevState, newItem])

setStore('streamingMarkdownToken', prevState => [...prevState, newItem])

when you pass store.streamingMarkdownToken to For. For triggers an update when the old array is replaced with the new one (as it has an entirely different reference) but its update is still "smart" because the elements are the same as they were in the old array; there is just a new one at the end.

hyperknotOP•2mo ago

I see! So basically:

a = [{t:1}, {t:2}]
b = [{t:1}, {t:2}]
a[0] === b[0] => False

a = [{t:1}, {t:2}]
b = [{t:1}, {t:2}]
a[0] === b[0] => False

but

a = [{t:1}, {t:2}]
b = [{t:1}, {t:2}]
... reconcile()
a[0] === b[0] => True

a = [{t:1}, {t:2}]
b = [{t:1}, {t:2}]
... reconcile()
a[0] === b[0] => True

and also

a = [{t:1}, {t:2}]
b = [a[0], {t:3}]
a[0] === b[0] => True

a = [{t:1}, {t:2}]
b = [a[0], {t:3}]
a[0] === b[0] => True

and For uses this to detect needed updates

peerreynders•2mo ago

Well if a is the original and b is the update, it's a that is updated (or not), not b.

hyperknotOP•2mo ago

I don't follow that. I wanted to write 3 scenarios, where - everything is updated, that was my scenario as of yesterday - reconcile runs the diffing algorithm with deep comparison, possibly nothing is updated - the third one is similar to your [...prevState, newItem] example, resulting in a partial update for For. Or at least I tried to write these

peerreynders•2mo ago

I'm not sure what you meant by

I use setState with 3 parameters

hyperknotOP•2mo ago

for example this from the docs:

setStore("users", store.users.length, {
  id: 3,
  username: "michael584",
  location: "Nigeria",
  loggedIn: false,
})

setStore("users", store.users.length, {
  id: 3,
  username: "michael584",
  location: "Nigeria",
  loggedIn: false,
})

or this

setStore({ from: 1, to: store.length - 1 }, "loggedIn", false)

setStore({ from: 1, to: store.length - 1 }, "loggedIn", false)

peerreynders•2mo ago

In terms of a being the original, I was thinking of a as the thing inside the store, b the update for the store which reconcile uses to figure out the updates it needs to make to a to make it "look like" b while keeping old object values in place which are value identical to their counter parts in b.

hyperknotOP•2mo ago

I think we thought the same, maybe with a <> b swapped, but I think I understand now the concept you were trying to explain to me.

peerreynders•2mo ago

The thing is with path syntax you can have any number of arguments

hyperknotOP•2mo ago

I see, it supports infinite variety of arguments. It was just a particular case of my store, that the normal case was ('key', value) and the more advanced case was 3 params, but now I understand it could have been 3+ params as well.

peerreynders•2mo ago

Example: Signal with fresh array and cloned elements https://playground.solidjs.com/anonymous/d568b395-98a3-41ba-a0e1-0ccc3e5df93e Result every time : all item fragments are dropped and rerun. Example: Store with cloned elements but using reconcile using a correctly configured key. https://playground.solidjs.com/anonymous/9fdbf95c-8e5c-4243-9a19-d4c0764835b1 Result: One fragment dropped, one fragment moved, one fragment created per update.

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

peerreynders•2mo ago

Example: Signal with fresh array and reused elements https://playground.solidjs.com/anonymous/e1ce46bc-90cd-45fc-812d-504cfee1422f Result: One fragment dropped, one fragment moved, one fragment created per update.

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

hyperknotOP•2mo ago

Thank you for those examples @peerreynders, I'll look into them tomorrow!

Gaming

Programming

How to modify array partially?

Did you find this page helpful?