Fix slow rerendering of large tables (reopened)

[Smert]

Hi! I have lags with rerendering of large tables with memoized rows:

const TestRow = memo(function Row() {
  return (
    <Table.Tr>
      {new Array(10).fill(0).map((_, index) => (
        <Table.Td key={index}>Cell</Table.Td>
      ))}
    </Table.Tr>
  );
});

function TestTable() {
  const [counter, setCounter] = useState(0);
  return (
    <>
      <p>Counter: {counter}</p>
      <button onClick={() => setCounter(counter + 1)}>Increment</button>
      <Table>
        <Table.Tbody>
          {new Array(1000).fill(0).map((_, index) => (
            <TestRow key={index}/>
          ))}
        </Table.Tbody>
      </Table>
    </>
  );
}

Eventloop lags for 200ms when I click on the button in this simple example. But all rows are memoized. I noticed then TableContext have a new value every render. It leads to rerender of Table.Tr and Table.Td:

Memoizing of the context and useStyle can improve performance:

I can suggest my decision of this problem in the pull request. Maybe you have another ideas.

[Smert]

@2jordan3 sorry, I closed #5684 by accident.

Putting String(name) in the dependency array may not work as intended. How about putting the value of name directly in the dependency array?

I think value of name couldn't be putting directly in the dependency array, because this array can have different size in renders.

How about use JSON.stringify(name)?

[2jordan3]

@2jordan3 sorry, I closed #5684 by accident.

Putting String(name) in the dependency array may not work as intended. How about putting the value of name directly in the dependency array?

I think value of name couldn't be putting directly in the dependency array, because this array can have different size in renders.

How about use JSON.stringify(name)?

I see, that method seems better!

[Smert]

Fixed

[jvllmr]

Wow, that is actually a significant performance improvement. Maybe this can get merged someday? Would help a table heavy app I have a lot.