[Performance] Optimize ExpenseReportListItemRow (~1.2ms × 50 = 60ms total)

[luacmartins]

Problem

ExpenseReportListItemRow takes ~1.2ms per render and with ~50 rows totals ~60ms, contributing to slow Reports list rendering.

Solution

Optimize the component (e.g. memoization, virtualized list tuning, or reducing work per row). Use React Profiler / Chrome DevTools to validate improvements.

Issue Owner

Current Issue Owner: @jmusial

[jmusial]

I'll look into this one.

[luacmartins]

Nice! This is a big one! Let me know if you need any help. From what I could tell, ActionCell seems like a heavy component. Maybe one thing we can explore is to move all logic in the cell components to the getSections function and compute everything there instead of in each row. Not sure how feasible/performant that is though, just a thought

[jmusial]

Yeah, was looking mostly into getting logic out of each row & Action Cell. It produces really small (-2-3 % for the SearchList component render time) improvements so digging deeper.
Also trying to find a reliable & cost effective way of evaluating the changes. Getting a full trace every time makes the process super slow and it's prone to fluctuations 😢

[luacmartins]

Nice, seems like you're on to something. Yea, the traces are slow. I'm using the React profiler locally to compare results, but in a smaller account since the large one constantly freezes/crashes my tabs.

[jmusial]

Yup, I started using Profiler component for initial measurements, it speeds things up

[jmusial]

@luacmartins added a draft PR with a small improvement let me know what do you think.