Cursor rule

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