Optimize a large policy management table

Interview framing: Start with measurement. Table performance problems can come from too many DOM nodes, expensive filtering, unstable renders, network payloads, or layout thrashing.

Diagnosis:

1. Reproduce with realistic data volume.
2. Use React Profiler to find components that render too often.
3. Use browser Performance tools to identify scripting, rendering, layout, and paint costs.
4. Check network payload size and API latency separately from rendering.

Optimizations:

• Server-side pagination/filtering/sorting for very large datasets.
• Virtualize rows when the user needs long scrolling.
• Memoize columns, row actions, and derived policy summaries.
• Keep row props stable with useMemo/useCallback only where it reduces real churn.
• Avoid expanding many heavy detail panels at once.
• Debounce search and cancel stale requests.
• Split bulk selection state from row rendering where possible.
• Use skeletons or progressive loading for perceived performance.

Common React pitfalls:

• Inline objects/functions causing memoized rows to rerender.
• Expensive formatters running on every render.
• Using array index keys when rows reorder.
• Global state updates invalidating the whole table.

Good closing: "I would set a performance budget around the slowest critical interaction, such as filtering or selecting bulk rows, then keep a regression test or profiler scenario for it."