AG Grid Performance Patterns

AG Grid is fast until you fight it. Most of the performance problems I’ve met with it in trading and risk screens came from treating it like a normal React component instead of letting it own rendering.

Live data

• Feed it transactions. For high-frequency updates use async (batched) transactions rather than handing the grid a new array every time.
• Keep column definitions stable. Recreating columnDefs on each render resets state and re-renders everything. Memoise them, and let the grid keep column order (maintainColumnOrder) instead of managing it by hand.
• Use the grid context for outside values. Passing changing values through context lets the grid refresh only the affected cells. For example: load every leg once, then filter by the selected strategy via context.
• Keep logic out of cells. Precompute in the data layer; a cell renderer should mostly format.
• Avoid interactive controls inside cells where you can; row selection or a side panel scales better.

User preferences

Saving layout, sort and column state sounds simple and goes wrong easily:

• Only persist on a human change. If preferences are saved from several places, including programmatic changes like data polling, you get race-condition loops. Check that the change came from the user, and debounce it.
• Read the latest value through a ref, or you’ll save stale state.

Everyday traps

• Floating-point money. A 0.14 vs 0.15 display bug is a rounding error; use a decimal library for prices and amounts.
• Non-virtualised dropdowns. A select with thousands of options can pin a CPU core. Virtualise it.
• Layout shift. A skeleton and a short loading buffer beat a grid that jumps around.
• Hidden filters. Show which filters are active, and make them easy to clear without losing the layout.

Related: Snapshot and Delta Sync over WebSockets · Finding React Re-render and Memory Leaks · Zustand Transient Updates