Memoize expensive computations in Chart and Globe components

Chart: wrap chartData (Date formatting on every data point) and
metricsWithTrends in useMemo — these ran on every render.
Globe: memoize marker computation (Math.max + filter + map on every render).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Usman Baig
2026-03-10 00:44:19 +01:00
parent ae0f6b8ffa
commit 5f797112ec
2 changed files with 18 additions and 15 deletions

View File

@@ -201,7 +201,7 @@ export default function Chart({
// ─── Data ──────────────────────────────────────────────────────────
const chartData = data.map((item) => {
const chartData = useMemo(() => data.map((item) => {
let formattedDate: string
if (interval === 'minute') {
formattedDate = new Date(item.date).toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' })
@@ -223,7 +223,7 @@ export default function Chart({
bounce_rate: item.bounce_rate,
avg_duration: item.avg_duration,
}
})
}), [data, interval])
const annotationMarkers = useMemo(() => {
if (!annotations?.length) return []
@@ -298,7 +298,7 @@ export default function Chart({
// ─── Metrics with trends ──────────────────────────────────────────
const metricsWithTrends = METRIC_CONFIGS.map((m) => {
const metricsWithTrends = useMemo(() => METRIC_CONFIGS.map((m) => {
const value = stats[m.key]
const previousValue = prevStats?.[m.key]
const change = previousValue != null && previousValue > 0
@@ -313,7 +313,7 @@ export default function Chart({
change,
isPositive,
}
})
}), [stats, prevStats])
const hasData = data.length > 0
const hasAnyNonZero = hasData && chartData.some((d) => (d[metric] as number) > 0