High-Performance Reactive Internationalization

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

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

let locale = $state('en-US');

Declares the reactive locale trigger.

let formatter = $derived(...);

Memoizes the expensive Intl object instantiation.

formatter.format(amount)

Uses the cached formatter for high-frequency updates.

Previous snippet Next snippet

More Expert JavaScript exercises →

From your library

High-Performance Reactive Internationalization

Related