[IndexTable] Improve reflow perf

[AndrewMusgrave]

WHY are these changes introduced?

Fixes https://github.com/Shopify/web/issues/70102

A lot of time is spent recalculating styles, that becomes more significant the more complex the page is.

WHAT is this pull request doing?

Using RFA to delay checking node attributes, to avoid reflows.

Screenies

Before	After

The self time was reduced from ~29ms to ~9ms

How to 🎩

• Load playground code
• Open the performance tab in your dev tools
• Press reload & wait till it finishes
• Look at the Bottom-up tab for recalculate styles
• Repeat on main (or before screenshot)

Playground code below

Copy-paste this code in playground/Playground.tsx:

import React from 'react';

import {Page, IndexTable, TextStyle, Card, useIndexResourceState} from '../src';

export function Playground() {
  return (
    <Page title="Playground" primaryAction={{content: 'Save', disabled: true}}>
      <IndexTableWithAllElementsExample />
    </Page>
  );
}

function IndexTableWithAllElementsExample() {
  const customers = createCustomers(50);
  const resourceName = {
    singular: 'customer',
    plural: 'customers',
  };

  const {selectedResources, allResourcesSelected, handleSelectionChange} =
    useIndexResourceState(customers);

  const promotedBulkActions = [
    {
      content: 'Edit customers',
      onAction: () => console.log('Todo: implement bulk edit'),
    },
  ];
  const bulkActions = [
    {
      content: 'Add tags',
      onAction: () => console.log('Todo: implement bulk add tags'),
    },
    {
      content: 'Remove tags',
      onAction: () => console.log('Todo: implement bulk remove tags'),
    },
    {
      content: 'Delete customers',
      onAction: () => console.log('Todo: implement bulk delete'),
    },
  ];

  const rowMarkup = customers.map(
    ({id, name, location, orders, amountSpent}, index) => (
      <IndexTable.Row
        id={id}
        key={id}
        selected={selectedResources.includes(id)}
        position={index}
      >
        <IndexTable.Cell>
          <TextStyle variation="strong">{name}</TextStyle>
        </IndexTable.Cell>
        <IndexTable.Cell>{location}</IndexTable.Cell>
        <IndexTable.Cell>{orders}</IndexTable.Cell>
        <IndexTable.Cell>{amountSpent}</IndexTable.Cell>
      </IndexTable.Row>
    ),
  );

  return (
    <Card>
      <IndexTable
        resourceName={resourceName}
        itemCount={customers.length}
        selectedItemsCount={
          allResourcesSelected ? 'All' : selectedResources.length
        }
        onSelectionChange={handleSelectionChange}
        hasMoreItems
        bulkActions={bulkActions}
        promotedBulkActions={promotedBulkActions}
        lastColumnSticky
        headings={[
          {title: 'Name'},
          {title: 'Location'},
          {title: 'Order count'},
          {title: 'Amount spent', hidden: false},
        ]}
      >
        {rowMarkup}
      </IndexTable>
    </Card>
  );
}

function createCustomers(num: number) {
  const customers = [];
  for (let i = 0; i < num; i++) {
    customers.push(createCustomer(i));
  }

  return customers;
}
const randomStr = () => `${(Math.random() + 1).toString(36).substring(7)}`;

function createCustomer(id: number) {
  return {
    id: `${id}`,
    url: `customers/${id}`,
    name: randomStr(),
    location: randomStr(),
    orders: 20,
    amountSpent: randomStr(),
  };
}

Demo 🎩 gif

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide

[AndrewMusgrave]

/snapit

[github-actions]

size-limit report 📦

Path	Size
polaris-react-cjs	201.16 KB (+0.01% 🔺)
polaris-react-esm	128.98 KB (+0.01% 🔺)
polaris-react-esnext	183.11 KB (+0.01% 🔺)
polaris-react-css	40.62 KB (0%)

[AndrewMusgrave]

/snapit

[github-actions]

🫰✨ Thanks @AndrewMusgrave! Your snapshot has been published to npm.

Test the snapshot by updating your package.json with the newly published version:

yarn add @shopify/[email protected]

[AndrewMusgrave]

/snapit

[github-actions]

🫰✨ Thanks @AndrewMusgrave! Your snapshot has been published to npm.

Test the snapshot by updating your package.json with the newly published version:

yarn add @shopify/[email protected]

[AndrewMusgrave]

Don't forget to hide whitespace!

[AndrewMusgrave]

When these values are omitted debounce will fallback to RAF.

Sixty fps is aprox 16.7ms which is how often RAF will fire. Rather than estimate when the frame will be, let's use it!

[AndrewMusgrave]

This'll default to raf

[AndrewMusgrave]

We only need to calculate the offset once, not for every checkbox

[AndrewMusgrave]

This'll default to raf

[AndrewMusgrave]

This'll default to raf

[AndrewMusgrave]

We only need to set the offset once, not for every checkbox!

[AndrewMusgrave]

act is needed since component state changes outside trigger (which automatically uses act)

[AndrewMusgrave]

/snapit

[github-actions]

🫰✨ Thanks @AndrewMusgrave! Your snapshot has been published to npm.

Test the snapshot by updating your package.json with the newly published version:

yarn add @shopify/[email protected]

[chloerice]

This is a huge improvement, thanks Andrew!! 🚀 🚀 🚀

[sethomas]

I'm confused by this, why not pass an inline function that returns the debounce? I see it done in both ways in this file, what's the difference?

[sethomas]

ah I get it, the difference between this executing immediately vs calling it directly.

[sethomas]

kk awesome, I did 10 tests each for before and after for the Recalculate Style:

Before average: 63.28ms
After average: 41.61ms

I wasn't able to see massive gains or numbers like you mentioned, but I could also have been doing something wrong.

[AndrewMusgrave]

I wasn't able to see massive gains or numbers like you mentioned, but I could also have been doing something wrong.

Let's take a look durning our pairing tomorrow. 60 is still double what ive been seeing so it'll be interesting to see where it's coming from 🤔

[sethomas]

We resolved it! Nice! Issues that I was doing:

1. I was testing the entire page with the storybook scope/wrappers vs the individual playground component
2. there were some chrome extensions on the page that was altering the performance.

Thanks for looking with me about what the discrepancies were.

[mrcthms]

Nice perf gains!