SolidJS•8mo ago

Can reconcile be used on its own?

Hi! The documentation doesn't go into a lot of detail on what reconcile does exactly. Can I use it "on its own" detached from reactivity? That is, is it just a function that shallowly diffs and unions the two objects? Or does it 'communicate' with reactivity somehow? The context here is that I'm trying to pre-optimize a custom signal-returning function that I already know will change frequently and have a lot of rows singly nested in an array, with only a few rows being added to the bottom each time. I currently have it working as a signal, not a store, but I'd like to try using reconcile here anyway. I realize the answer here might be "no, just use a store," but that's exactly what I'm asking essentially and I'm also just curious.

4 Replies

thetarnav•8mo ago

reconcile is implemented specifically to solid stores you probably need to find other library for reconciling any js object but doing that will probably cause some issues down the line like you have a signal with a list of messages:

const [messages, setMessages] = solid.createSignal([{msg: "hello"}], {equals: false})

<solid.For each={messages()}>
  {({msg}) => <li>This will not update: {msg}</li>}
</solid.For>

setMessages(list => {
  list[0].msg = "hi"
  return list
})

const [messages, setMessages] = solid.createSignal([{msg: "hello"}], {equals: false})

<solid.For each={messages()}>
  {({msg}) => <li>This will not update: {msg}</li>}
</solid.For>

setMessages(list => {
  list[0].msg = "hi"
  return list
})

jon vuri•8mo ago

Got it, thank you for your help! I really just switched to signals for my use case because it was a somewhat complex query result with loading state and I wanted different reactivity at various levels. At the same time, I am learning Solid for the first time and stores are kinda hard to grapple with at first, signals are much more straightforward. So, this was really just an attempt to avoid stores. Next time I revisit this logic, I'll just switch back to stores, and try to isolate the trouble I was having further

thetarnav•8mo ago

what stores and do you can do on your own too maybe I answered the question about reconcile a bit too literally this is how you would do the example with messages with just signals:

interface Message {
  content: solid.Accessor<string>
  setContent: solid.Setter<string>
}

function createMessage(): Message {
  const [content, setContent] = solid.createSignal("Hello!")  
  return {content, setContent}
}

const [messages, setMessages] = solid.createSignal([
  createMessage(),
  createMessage()
])

<solid.For each={messages()}>
  {(msg) => <li>This will update: {msg.content()}</li>}
</solid.For>

messages()[0].setContent("hi")

interface Message {
  content: solid.Accessor<string>
  setContent: solid.Setter<string>
}

function createMessage(): Message {
  const [content, setContent] = solid.createSignal("Hello!")  
  return {content, setContent}
}

const [messages, setMessages] = solid.createSignal([
  createMessage(),
  createMessage()
])

<solid.For each={messages()}>
  {(msg) => <li>This will update: {msg.content()}</li>}
</solid.For>

messages()[0].setContent("hi")

jon vuri•8mo ago

that's essentially how I'm doing it now, yes, returning 'results' and 'queryState' signals together as a tuple. The only weird bit is that I do manual diffing of old and new results in the update function (to maintain object references for unchanged rows) - but that is all localized to that function and not really anything to do with reactivity, I'm realizing

Gaming

Programming

Can reconcile be used on its own?