June 30th 2024

I needed to be able to resize a column's width by holding the edge of the header cell and dragging it left or right (similar to Notion's database table or MUI's data grid).

Most of the solutions I found online use React's state — every applied change requires a re-render to be seen. When you have one or a few elements on the page, it's fine, but when applying updated sizes to multiple rectangles, you risk facing tons of re-renders and, therefore, performance issues.

https://github.com/primaryindexonline/react-resize does not require state. Simply provide a unique id and two references (movingElement and handlerElement) to create a new resize object. Now you can add listeners anywhere in your app, observing the changes of the movingElement and directly reflecting the references.

Check repository for details and source code.