Skip to main content
GoodFirstPicks
DashboardIssuesReposLeaderboard

GoodFirstPicks by Leaveitblank © 2026

CreatorRequest a RepoPrivacy PolicyTerms of Service
[Compiler Bug]: constant gets memoized with a wrong dependency | GoodFirstPicks

[Compiler Bug]: constant gets memoized with a wrong dependency

facebook/react 2 comments 1mo ago
View on GitHub
mediumopenScope: somewhat clearSkill match: maybeTest focusedReactJavaScriptTypeScript

Why this is a good first issue

The issue involves optimizing compiler behavior for specific Intl types.

AI Summary

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.

Issue Description

What kind of issue is this?

  • React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization)
  • babel-plugin-react-compiler (build issue installing or using the Babel plugin)
  • eslint-plugin-react-hooks (build issue installing or using the eslint plugin)
  • react-compiler-healthcheck (build issue installing or using the healthcheck script)

Link to repro

https://playground.react.dev/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAEAIgIY4IDCEAtgA6EKY4AUwRAJhQkQL4BKIsAA6xInEJgcRNBBi0KlGEQC8RTAgDuRAJIsANgDpylACp5aCAGLzFbAOTMAtAFUAyg4EBuMWKJEMAg4sMSs-gFEADz4Vlw8sQiqwNyURjgQuu4A8u44MHiYAOasAnwAfBGRwnIKSggwRrX2rKkIZVXRAPSJleI+YnwgADQgkphoeEUoIJaMMDI4AJ70vBwACgZQRYXZ9PhS-LIwdEQOAEZk5wgGzvRbO5jOQWS4zpIMeAYNXZx40g5fJgxOwIl0uh96F8KARMABZCCcBDIIgiEBkAwGNGDIhgGFgSYIMBETbbXb7WFgHwjcAACwgWn0ykwGLAKDQrIQfCAA

Repro steps

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

GitHub Labels

Type: Feature RequestComponent: React Compiler

Want to work on this?

Claim this issue to let others know you're working on it. You'll earn 20 points when you complete it!

Risk Flags

  • requires understanding of compiler internals
  • potential cross-cutting changes
Loading labels...

Details

Points20 pts
Difficultymedium
Scopesomewhat clear
Skill Matchmaybe
Test Focusedyes