The issue involves optimizing compiler behavior for specific Intl types.
The React compiler incorrectly memoizes a constant with a wrong dependency, specifically `Intl.DateTimeFormat`, leading to unnecessary recreations. The fix requires teaching the compiler about the `Intl` family of types to optimize output. Blockers include understanding compiler internals and ensuring no regressions.
Given this example:
function DateComponent({ date }) {
const formatter = new Intl.DateTimeFormat('en-US');
return (
<time datetime={date.toISOString()}>
{formatter.format(date)}
</time>
);
}
gets compiled to:
import { c as _c } from "react/compiler-runtime";
function DateComponent(t0) {
const $ = _c(6);
const { date } = t0;
let t1;
let t2;
if ($[0] !== date) {
const formatter = new Intl.DateTimeFormat("en-US");
t1 = date.toISOString();
t2 = formatter.format(date);
$[0] = date;
$[1] = t1;
$[2] = t2;
} else {
t1 = $[1];
t2 = $[2];
}
let t3;
if ($[3] !== t1 || $[4] !== t2) {
t3 = <time datetime={t1}>{t2}</time>;
$[3] = t1;
$[4] = t2;
$[5] = t3;
} else {
t3 = $[5];
}
return t3;
}
const formatter = new Intl.DateTimeFormat("en-US"); incorrectly gets date as a dependency, despite not relying on it, leading to it being recreated too often. In the case of Intl.DateTimeFormat, [mdn specifically recommends creating it once and re-using it](https://developer.mozilla.org/en-US/docs/Web/JavaSc
Claim this issue to let others know you're working on it. You'll earn 20 points when you complete it!