Order respecting Map / Object and <For> component

💙Intermediate

From what I read, every modern browser (ES2015+) respects insertion order on Object.
Map does it by definition.

Can you tell me how is it the best way to use these with Solid?

I though Map is not supported for tracking reactivity, so my only chance is an order respecting object or two separate data structures (like array + object). Can you confirm this?

And when using an object, what's the best way to do <For> component loops on it? I mean I could do an unkeyed <For> component with Object.values, or maybe I could use Keyed from Solid Primitives.

So far, on simple arrays I had great performance with normal, unkeyed <For> + reconcile() for setting state.

But how does it change with Object.values? If I set the object using reconcile, will the whole intelligent diffing-tracking pass through Object.values + For loop?

Or, since I have the key for "free", should I use Solid Primitives / Keyed instead?

// store
  days: Record<string, DayData>

// UI
      <For each={Object.values(sessionStore.state.days)}>
        {(day) => <SessionTreeDay day={day} />}
      </For>

// store
  days: Record<string, DayData>

// UI
      <For each={Object.values(sessionStore.state.days)}>
        {(day) => <SessionTreeDay day={day} />}
      </For>

// store
  days: Record<string, DayData>

// UI
      <For each={Object.values(sessionStore.state.days)}>
        {(day) => <SessionTreeDay day={day} />}
      </For>

// store
  days: Record<string, DayData>

// UI
      <For each={Object.values(sessionStore.state.days)}>
        {(day) => <SessionTreeDay day={day} />}
      </For>

Order respecting Map / Object and <For> component

Similar Threads

Similar Threads

Similar Threads