SolidJS•3y ago•

4 replies

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

.valid

property is being computed and set externally, as a part of

updateInput

updateInput

. There's where the problem comes in - I do want the children of

<For>

<For>

to update with the signal, and for

<ValidTag>

<ValidTag>

to update, but I do not want the

<Input>

<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>

<Input>

manually), though a naive attempt did not work.

I could guess that splitting the

.valid

.valid

signal and passing a list of signals, or a store, into

<For>

<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.

How to properly memoize children?

<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

.valid

property is being computed and set externally, as a part of

updateInput

updateInput

. There's where the problem comes in - I do want the children of

<For>

<For>

to update with the signal, and for

<ValidTag>

<ValidTag>

to update, but I do not want the

<Input>

<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>

<Input>

manually), though a naive attempt did not work.

I could guess that splitting the

.valid

.valid

signal and passing a list of signals, or a store, into

<For>

<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.

How to properly memoize children?

Similar Threads

How to properly memoize children?

Similar Threads

Similar Threads

Similar Threads