Memoize the Insights donut and spending-vs-savings charts and their tooltip/legend subcomponents

[Baskarayelu]

📋 Description

components/Insights/categoryDonutChart.tsx and components/Insights/spendingVsSavingChart.tsx recompute derived data (totals, center labels, transformed datasets) and define inline CustomTooltip/CustomLegend components on every render, without useMemo/React.memo. Recharts re-renders are already expensive, and these are mounted together on app/insights/page.tsx.

Why this matters: the Insights page mounts several heavy charts at once; recomputing derived series and recreating tooltip/legend components each render multiplies Recharts' reconciliation cost and causes visible jank on lower-end devices. Memoizing the inputs and subcomponents is a measurable, low-risk performance win.

🎯 Requirements & Context

Functional requirements

• Wrap expensive derived calculations (totals, center label, transformed data arrays) in useMemo with correct dependency arrays in both chart files.
• Extract or memoize the inline CustomTooltip/CustomLegend so they aren't re-created every render (define outside the component or wrap in React.memo/useCallback).
• Wrap each chart component in React.memo where props are referentially stable.
• Keep the existing sr-only accessible summaries and the color-blind-safe palette from components/Insights/palette.ts intact.
• Verify no behavior change with a render test (same output, fewer re-renders).

Context & constraints

• Recharts 3.7.0; do not change chart visuals — this is a perf refactor.
• Coordinate with the chart-crash fix if both are in flight (rebase on it).

🛠️ Suggested Execution

1. Fork & branch

git checkout -b perf/memoize-insights-charts

2. Implement changes

• Add memoization, hoist subcomponents, and add a render test asserting stable output.
• Document the memoization rationale in TSDoc on the derived-data hooks.

3. Test & commit

npx tsc --noEmit
npm run lint
npm run test:coverage

• Cover edge cases: empty datasets, single category, reduced-motion, and resizing (ResponsiveContainer) without thrashing.

Example commit message

perf(insights): memoize donut + spending/savings charts and subcomponents

Avoids per-render recomputation of derived series and recreating tooltip/legend.

✅ Acceptance Criteria & Guidelines

Requirement	Target
Derived data + subcomponents memoized	Required
No visual/behavior change	Required
Render test added	Required
Accessibility preserved	Required
npx tsc --noEmit, npm run lint, npm run build clean	Required
Timeframe	96 hours from assignment

💬 Community & Support

Join the RemitWise contributor community on Discord: https://discord.gg/CtQuPZFMA

Please comment when you pick this up so we can avoid duplicate work. 🚀

[Menjay7]

Hi! I came across this issue and would love to work on it. I have experience with similar tasks and I'm confident I can investigate, implement a clean solution, and thoroughly test it before submitting a PR. If the issue is still open, I would appreciate it if you could assign it to me. Thank you!

[senmalong]

Hello,

Please I’d love to take this issue on. I’m a smart contract and full-stack developer with experience across OnlyDust, Drips Waves

My stack includes Rust, Soroban, Cairo, Solidity, and TypeScript. I can deliver a clean, tested, and well-documented solution within 24 hours of assignment.

Happy to start immediately.

[grantfox-oss]

🦊 GrantFox — @senmalong has been assigned to this issue as part of the Official Campaign campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #583)
2. Your PR will be reviewed by the Remitwise-Org maintainers

Good luck! Track your progress on GrantFox.

[senmalong]

Resolved via PR #618