List rerendering trigger

[HEAVYPOLY]

I'm trying to dynamically return different component based on the type of setting.v, but in this case the Slider is rerendered each time setting changes.

If I precalculate the ui type like this:

then vanX.list works if it's setup like this:

const defaultToolSettings = {
  prHu: { readable: 'Hue', v: 0.0 },
  prOp: { readable: 'Opacity', v: 0.0 },
  prAlt: { readable: 'Alt Color', v: 0.0 },
  prDx: { readable: 'Dist W', v: true },
  prDy: { readable: 'Dist H', v: false},
}
//precalculate UI type

function setUITypes (settings) {
  for (const key in settings) {
    const setting = settings[key]
    setting.uiType = setting.options ? 'selecter' : typeof setting.v
    prnt('ui type', setting.uiType)
  }
}
setUITypes(defaultToolSettings)
const toolSettings = vanX.reactive(defaultToolSettings)
      
      SettingsList = (settings) =>
      vanX.list(
        div({
          class: 'gridMd f1',
          style: `width:100%;gap:1rem;height:min-content;
          grid-template-columns:repeat(auto-fill,minmax(29rem, 1fr));`
        }),
        settings,
        ({ val: setting }, _, key) => {
          if (!setting.hidden) {
            switch (setting.uiType) {
              case 'number': return Slider(setting)
              case 'boolean': return Checkbox(setting)
            }
          }
        }
      )

But Ideally I'd like the ui type to be calculated inside the list like this, which works but the problem is the components are rerendered completely whenever setting.v changes. How can I set this up to get best of both worlds?

const SettingsList =
    vanX.list(
      div(),
      settings,
      ({ val: setting }, _, key) => {
        switch (typeof setting.v) {
          case 'number':
            return SliderComponent(setting)
          case 'boolean':
            return CheckboxComponent(setting)
        }
        return null
      }
    )
)

EDIT: writing down the problem helped me figure it out, needed vanX.raw to ignore setting reactivity while determining setting type

            switch (typeof vanX.raw(setting).v) {
              case 'number': return Slider(setting)
              case 'boolean': return Checkbox(setting)
            }