TanStackT
TanStack•3y ago
awake-maroon

Solid: Efficiently rerendering when data is updated

I have a table that has cells that can either be editable or static, based on a toggle switch. Whenever the data is edited (which updates the underlying data backed by tanstack/query), "Cell" is logged by each cell in the entire table, and each TableCell & EditableCell in the table gets rerendered. Adding similar logs to the containing Row component does not have a similar repetition.

However, when I replace flexRender with a Switch component, and manually switch between the different cell types, the issue doesn't occur. So I'm wondering whether I'm missing something with the flexRender utility, or whether it works correctly in the "solid" way, i.e not rerunning components.

Edit: I've created a reproduction here: https://codesandbox.io/p/github/raymondboswel/solid-table-rendering-example

The columnDef code looks something like this ( I can post more snippets if that would help):
    cell: (info) => {
      console.log("Cell");
      return (
        <Show
          when={column.editable && info.row.original.editable === true}
          fallback={
            <TableCell
              parseHtml={column.parseHTML}
              row={info.row}
              column={info.column}
              text={(fn(info.getValue(), column) as string) || ""}
              highlight={highlight(info.row.original)}
            />
          }
        >
          <EditableCell
            parseHtml={column.parseHTML}
            row={info.row}
            column={info.column}
            text={(fn(info.getValue(), column) as string) || ""}
            highlight={highlight(info.row.original)}
          />
        </Show>
      );
CodeSandbox
CodeSandbox brings instant cloud development environments that keep you in flow.
CodeSandbox
Was this page helpful?