Performance issues compared to VDOM like React

[dominictobias]

When making a headless Datagrid for both React and Solid, I ran into something surprising: React is a lot smoother and more performant.

It looks like on scroll of the grid (i.e. when some properties change), unlike React which figures out what html nodes to update on a fine grained level, Solid instead re-creates every element.

Take a look at devtools flashing to show what elements are re-created on scroll:

React (nothing re-created):
https://github.com/solidjs/solid/assets/760314/fb84a76d-22ab-4225-b592-df49b74e4b8a

Solid (everything re-created each scroll event):
https://github.com/solidjs/solid/assets/760314/9095aa54-34ee-4410-b740-0ae441fb344d

I'm surprised as Solid is supposed to be performant and fine grained, but also I've only considered that granularity when dealing with single values.

These are the render loops of the grid:

https://github.com/Lightgrid-io/lightgrid/blob/master/packages/solid/src/components/DataGrid/DataGrid.tsx

<div
  class="lg-view"
  style={{ width: `${derivedCols().size}px`, height: `${contentHeight()}px` }}
>
  <For each={bodyAreas()}>
    {area => (
      <GridArea
        mgr={mgr}
        area={area}
        columns={area.colResult.items}
        rows={area.rowResult.items}
        rowState={props.rowState}
        setRowState={props.setRowState}
        detailsWidth={viewport().width}
        renderRowDetails={props.renderRowDetails}
        enableColumnReorder={props.enableColumnReorder}
        selection={selection()}
        selectionStartCell={startCell()}
        isFirstColumnGroup={area.colResult.firstWithSize}
        colReorderKey={colReorderKey()}
      />
    )}
  </For>
  <For each={headerAreas()}>
    {headerArea => (
      <HeaderArea<T>
        mgr={mgr}
        columns={headerArea.columns}
        flatColumns={headerArea.flatColumns}
        colAreaPos={headerArea.colAreaPos}
        headerRowCount={headerArea.headerRowCount}
        headerRowHeight={headerArea.headerRowHeight}
        filterRowHeight={headerArea.filterRowHeight}
        onFiltersChange={props.onFiltersChange}
        left={headerArea.left}
        width={headerArea.width}
        height={headerArea.height}
        enableColumnResize={props.enableColumnResize}
        enableColumnReorder={props.enableColumnReorder}
        colReorderKey={colReorderKey()}
      />
    )}
  </For>
</div>

The arrays are re-created on a change like a scroll event because properties in them change. For example columns and rows are virtualized so the items change as the user scrolls.

In React world this causes minimal changes to the DOM. But in Solid world this causes every element to get re-created.

Even on a filter change, which is designed specifically to cause as few renders as possible: the input state is local, and the onChange is just so the user can receive a callback and filter their data (debounced), causes an immediate loss of focus and re-rendering of the whole grid in Solid:

function TextFilter({
  type,
  onChange,
}: {
  type?: JSX.InputHTMLAttributes<HTMLInputElement>['type']
  onChange: (value: string) => void
}) {
  const [value, setValue] = createSignal('')
  return (
    <Input
      type={type}
      value={value()}
      style={{ padding: '0.25em' }}
      onInput={e => {
        setValue(e.currentTarget.value)
        onChange(e.currentTarget.value)
      }}
    />
  )
}

First time: values disappears and input loses focus, on subsequent changes it strangely works
https://github.com/solidjs/solid/assets/760314/6f460632-0eef-4a56-a235-d1694b59a692

I thought perhaps swapping out createSignal with createStore for some of these key objects would make a difference, but sadly it doesn't:

const [bodyAreas, setBodyAreas] = createStore<BodyAreaDesc<T, N>[]>([])
  const [headerAreas, setHeaderAreas] = createStore<HeaderAreaDesc<T, N>[]>([])
  const [viewport, setViewport] = createSignal({ width: 0, height: 0 })
  const [scrollLeft, setScrollLeft] = createSignal(0)
  const [scrollTop, setScrollTop] = createSignal(0)
  const [contentHeight, setContentHeight] = createSignal(0)
  const [headerHeight, setHeaderHeight] = createSignal(0)
  const [startCell, setStartCell] = createSignal<CellPosition>()
  const [selection, setSelection] = createSignal<CellSelection>()
  const [colResizeData, setColResizeData] = createSignal<ColResizeData>()
  const [colReorderKey, setColReorderKey] = createSignal<ItemId>()

I wonder if I'm doing something obviously wrong in the Solid paradigm? 🤔

If anyone is interested in going as far as trying it out:

• pnpm dev in packages/solid + react + docs
• visit http://localhost:8093/docs/columns/filtering and observe perf issue in videos

[atk]

You should probably debounce the scroll events to the next animation frame, i.e. collect the scroll events into a signal and on the next animation frame, change the data for the latest scroll event.