Andrew's Digital Garden

Why Twitter uses so many divs

Twitter is built with React Native for Web, an implementation of React Native's components built to work with the standard React DOM. These cross platform primitives are created to normalise inconsistencies and work primarily on touch devices, while still remaining accessible.

Because of this, RNW recreates base HTML components with their own implementations, relying on HTML attributes, ARIA properties, etc. This accounts for why so many things compile to div, even though accessibly-speaking they're achieving a similar output to their native HTML counterparts.

One interesting thing about this is how it can improve the DX of some native components. For example, a button has historical problems with flexbox children, but that isn't a concern if you make your own (accessible) button, as the markup won't cause the problem. Similarly, RNW's Paragraph component doesn't render a p, so that it can properly support flow content which the native element considers invalid.

[[html]] [[js]] [[react]]

Why Twitter uses so many divs