javascript / expert
Snippet
High-Performance Reactive Internationalization
Creating new Intl formatters is computationally expensive. By using $derived, we ensure the formatter is only re-instantiated when the locale or currency changes. This pattern optimizes performance in large-scale applications where data needs to be formatted dynamically based on user preferences.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
let locale = $state('en-US');let amount = $state(1250.50);let formatter = $derived(new Intl.NumberFormat(locale, {style: 'currency',currency: locale === 'de-DE' ? 'EUR' : 'USD'}));let displayPrice = $derived(formatter.format(amount));
svelte
Breakdown
1
let locale = $state('en-US');
Declares the reactive locale trigger.
2
let formatter = $derived(...);
Memoizes the expensive Intl object instantiation.
3
formatter.format(amount)
Uses the cached formatter for high-frequency updates.