Skip to content

refactor(theme): memoize rendering#698

Merged
mikewheeleer merged 2 commits into
Talenttrust:mainfrom
AnnieIj:refactor/theme-01-memoize
Jul 25, 2026
Merged

refactor(theme): memoize rendering#698
mikewheeleer merged 2 commits into
Talenttrust:mainfrom
AnnieIj:refactor/theme-01-memoize

Conversation

@AnnieIj

@AnnieIj AnnieIj commented Jul 25, 2026

Copy link
Copy Markdown
Contributor

Summary

Memoize derived theme data and row rendering to avoid re-renders on unrelated state changes, improving responsiveness on larger data sets.

Changes

src/lib/preferences.tsx

  • Wrap formatAmount in useCallback keyed on the amountFormat primitive, not the entire preferences object — avoids recreating the function when unrelated fields (theme, toastDensity, quietMode) change
  • Wrap updatePreference in useCallback with zero dependencies for a stable reference
  • Wrap the PreferencesContext.Provider value in useMemo so consumers only re-render when the actual dependencies change
  • Extract module-level FALLBACK_UPDATE and FALLBACK_FORMAT constants so usePreferences() outside a provider returns stable references

src/components/settings/SettingsPanel.tsx

  • Wrap the component with React.memo to prevent re-renders from unrelated parent state
  • Move theme/currency/density option arrays to module-level constants to avoid per-render allocations

src/components/settings/SettingsTrigger.tsx

  • Wrap handleClose in useCallback so React.memo on SettingsPanel is effective

src/lib/__tests__/preferences.test.tsx

  • Move localStorage.clear() to top-level beforeEach to prevent cross-test state leakage
  • Add memoization reference-stability tests covering: stable updatePreference, stable formatAmount when non-amountFormat prefs change, formatAmount reference changes when amountFormat changes, filter/state changes propagate correctly

Test Results

Test Suites: 20 passed, 20 total
Tests:       133 passed, 133 total
Snapshots:   1 passed, 1 total
  • ESLint: 0 errors, 0 warnings
  • TypeScript (tsc --noEmit): 0 errors
  • Build (npm run build): Success

Behaviour

No behavioural changes — all existing tests pass without modification. The memoization only affects internal reference stability, not output.

Closes #564

AnnieIj added 2 commits July 25, 2026 05:45
Memoize derived theme data and row rendering to avoid re-renders
on unrelated state changes.

- Wrap formatAmount in useCallback keyed on amountFormat primitive
- Wrap updatePreference in useCallback for stable reference
- Wrap PreferencesContext value in useMemo to avoid new objects
- Extract module-level fallback constants for usePreferences()
  outside provider
- Wrap SettingsPanel in React.memo with useCallback'd onClose
- Move SettingsPanel option arrays to module-level constants
- Add memoization reference-stability tests
- Move localStorage.clear() beforeEach to top-level scope

Closes Talenttrust#564
- Integrate safeCurrencyFormat, sanitizePreferences, safeStorage,
  useMediaQuery, ToastDuration, idleDisconnectMs from upstream
- Preserve useCallback/useMemo memoization and module-level fallbacks
- Preserve React.memo on SettingsPanel and useCallback on handleClose
- Merge all upstream tests (sanitizePreferences, invalid currency,
  theme application) with memoization reference-stability tests
- Fix regex escaping in compact format tests
@AnnieIj
AnnieIj force-pushed the refactor/theme-01-memoize branch from 598014b to 38fe48f Compare July 25, 2026 05:47
@drips-wave

drips-wave Bot commented Jul 25, 2026

Copy link
Copy Markdown

@AnnieIj Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

@mikewheeleer

Copy link
Copy Markdown
Contributor

well done @AnnieIj, this reads well. merging in 🌟

@mikewheeleer
mikewheeleer merged commit 6f71e0b into Talenttrust:main Jul 25, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Memoize theme rendering to avoid re-renders on unrelated state

2 participants