T
TanStack•3y ago
like-gold

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>
      );
    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.
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?