Category: performance
Problem
src/app/dashboard/payments/page.tsx holds form (the create-payment fields) in the same component that renders the full payments table. Every setForm({ ...form, [key]: value }) call on a keystroke re-renders the whole PaymentsPage, including the (potentially 20-row) table, with no React.memo anywhere in the file to short-circuit it.
Impact
On slower devices or with a fuller table, typing in the create-payment modal could feel janky since unrelated table rows re-render on every character typed.
Suggested fix
Extract the create-payment form into its own memoized child component, or move the table rows into a React.memo-wrapped subcomponent.
Category: performance
Problem
src/app/dashboard/payments/page.tsxholdsform(the create-payment fields) in the same component that renders the full payments table. EverysetForm({ ...form, [key]: value })call on a keystroke re-renders the wholePaymentsPage, including the (potentially 20-row) table, with noReact.memoanywhere in the file to short-circuit it.Impact
On slower devices or with a fuller table, typing in the create-payment modal could feel janky since unrelated table rows re-render on every character typed.
Suggested fix
Extract the create-payment form into its own memoized child component, or move the table rows into a
React.memo-wrapped subcomponent.