jon vuri Posts - Answer Overflow

jon vuri

•Created by jon vuri on 11/17/2023 in #support

How to properly memoize children?

I have a small reactivity puzzle that I'm a little stumped on. I'm not sure if I just haven't structured my signals granularly enough, or simply don't understand something, or both. Essentially I have a pattern like this, in order to implement a list of dynamic inputs (1-N of them):

<For each={inputStates()>
  {(inputState) => (
    <ValidTag valid={inputState.valid}>
      <Input
        placeholder={inputState.value}
        onInput={[
          (input_id: string, event) => {
            updateInput(event.currentTarget.value)
          },
          inputState.input_id,
        ]}
      />
    </ValidTag>
  )}
</For>

<For each={inputStates()>
  {(inputState) => (
    <ValidTag valid={inputState.valid}>
      <Input
        placeholder={inputState.value}
        onInput={[
          (input_id: string, event) => {
            updateInput(event.currentTarget.value)
          },
          inputState.input_id,
        ]}
      />
    </ValidTag>
  )}
</For>

Where the .valid property is being computed and set externally, as a part of updateInput. There's where the problem comes in - I do want the children of <For> to update with the signal, and for <ValidTag> to update, but I do not want the <Input> to update - it has no need to after initialization, and it re-rendering causes focus to blur (but also is just undesirable). So, the title suggests one path I could guess out of this (memoizing <Input> manually), though a naive attempt did not work. I could guess that splitting the .valid signal and passing a list of signals, or a store, into <For> might also work. But mainly, I just want to know what the idiomatic way to do this is - or any way, really. I'm pretty stumped.

5 replies

SSolidJS

•Created by jon vuri on 11/14/2023 in #support

How to set a store back to a default state at the top level (or clear it)?

Hi, I'm trying to use a store to represent the state of a dynamic number of inputs, where the inputs all map to a column in a db. A store seems like a good fit for this at first glance - I can store the input values keyed by the column id, and quickly get a set of signals for a dynamic number of inputs (then use those to determine form validity). My problem is when I submit - at that point I want to reset the entire store, thus also resetting all the controlled inputs to be blank as well, in preparation for the next input. How do I do this? For example:

const [inputs, setInputs] = createStore<Record<string, string>>({})

const updateInput = (column_id: string, value: string) => {
  setInputs({ [column_id]: value })
}

const resetInputs = () => {
  // ..?
}

const [inputs, setInputs] = createStore<Record<string, string>>({})

const updateInput = (column_id: string, value: string) => {
  setInputs({ [column_id]: value })
}

const resetInputs = () => {
  // ..?
}

8 replies

SSolidJS

•Created by jon vuri on 10/9/2023 in #support

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.

7 replies

Gaming

Programming