1---
2title: Hoist Intl Formatter Creation
3impact: LOW-MEDIUM
4impactDescription: avoids expensive object recreation
5tags: javascript, intl, optimization, memoization
6---
7 
8## Hoist Intl Formatter Creation
9 
10Don't create `Intl.DateTimeFormat`, `Intl.NumberFormat`, or
11`Intl.RelativeTimeFormat` inside render or loops. These are expensive to
12instantiate. Hoist to module scope when the locale/options are static.
13 
14**Incorrect (new formatter every render):**
15 
16```tsx
17function Price({ amount }: { amount: number }) {
18  const formatter = new Intl.NumberFormat('en-US', {
19    style: 'currency',
20    currency: 'USD',
21  })
22  return <Text>{formatter.format(amount)}</Text>
23}
24```
25 
26**Correct (hoisted to module scope):**
27 
28```tsx
29const currencyFormatter = new Intl.NumberFormat('en-US', {
30  style: 'currency',
31  currency: 'USD',
32})
33 
34function Price({ amount }: { amount: number }) {
35  return <Text>{currencyFormatter.format(amount)}</Text>
36}
37```
38 
39**For dynamic locales, memoize:**
40 
41```tsx
42const dateFormatter = useMemo(
43  () => new Intl.DateTimeFormat(locale, { dateStyle: 'medium' }),
44  [locale]
45)
46```
47 
48**Common formatters to hoist:**
49 
50```tsx
51// Module-level formatters
52const dateFormatter = new Intl.DateTimeFormat('en-US', { dateStyle: 'medium' })
53const timeFormatter = new Intl.DateTimeFormat('en-US', { timeStyle: 'short' })
54const percentFormatter = new Intl.NumberFormat('en-US', { style: 'percent' })
55const relativeFormatter = new Intl.RelativeTimeFormat('en-US', {
56  numeric: 'auto',
57})
58```
59 
60Creating `Intl` objects is significantly more expensive than `RegExp` or plain
61objects—each instantiation parses locale data and builds internal lookup tables.
62