Measuring Chat Bubbles Without Reflow: Pretext vs. CellMeasurer

Measuring Chat Bubbles Without Reflow: Pretext vs. CellMeasurer If you've ever built a chat UI with virtualization, you've hit the same wall: VariableSizeList needs item heights before items render. The browser knows the answer — but asking it costs a layout reflow. This post compares two approaches that both give you accurate heights, and what separates them in practice. The Problem Virtualizers skip rendering off-screen items to keep large lists fast. The tradeoff: you have to tell them how tall each item is upfront. For chat bubbles — where height depends on text wrapping, font metrics, and container width — that means either measuring in the DOM or calculating without it. CellMeasurer (react-virtualized) renders each row and reads its real height via getBoundingClientRect . Pretext calculates the same answer using Canvas, without touching the DOM. Both give accurate heights. The difference is when and how the work happens. The Setup Two branches, identical CSS and message data — 20