Putting MUI, Mantine, Ant Design and React Spectrum Under Load | | Den Odell timed ten popular design systems, including MUI, Mantine, Ant Design and React Spectrum, by opening a 249-country dropdown and selecting 100 boxes at once, and profiling the slow cases. *"Performance belongs on the design system team's priority list, next to accessibility," he says, while finding: -
📊 With the CPU slowed 4x, opening the dropdown took 84ms in Mantine and 134ms in Ant Design, but over 200ms in MUI and React Spectrum, both of which froze the UI past his 100ms budget. -
🔍 React Spectrum's culprit was React Aria measuring options one by one and forcing layout each time. Den filed an issue and a fix is already in review. -
⚖️ Framework alone didn't decide the results as non-React Ionic was slowest to open by far (1,266ms) but quick with checkboxes, while MUI's 70ms for the checkboxes beat Ant Design's 421ms. -
🧪 Den's Playwright tests are open source, including a check that a list twice as long takes no more than about twice as long to open. | 💬 Does Redact pay off? On r/reactjs, commenters pondered who needs it and how it differs from Preact, while one tester found re-renders cost about twice the CPU across two production sites. | | React.lazy, Suspense and the Hidden 300ms Startup Delay — A lazy component suspends on its first render even when its code is already loaded, and React reveals suspended content at most once every 300ms. Here's how one team traced the resulting delay, and what fixed it (with or without React internals). Matthew Wong (Tab Widgets) | 🛠 Code, Tools & Libraries | |