The Virtual DOM is Fast, but Not Magic
React's declarative nature makes UI development incredibly intuitive, but as applications grow in complexity—specifically complex tables displaying tens of thousands of rows—the reconciliation process becomes computationally expensive. Dropped frames and input lag are unacceptable in high-end B2B software.
Memoization Strategies
The excessive use of useMemo and useCallback is often considered an anti-pattern. However, at the top level of massive grid contexts, referential equality is crucial to preventing complete tree re-renders.
We instituted strict guidelines on propagating state down. State should always live as close to where it is needed as possible to localize renders.
Virtualization is Mandatory
DOM nodes are expensive. Rendering 10,000 table rows will crash browser tabs, regardless of how fast your React code executes. We utilized standard windowing techniques (like react-window) to only render the DOM nodes currently visible on the screen, recycling them as the user scrolls.