TGViewer
Антон Непша.js Антон Непша.js @nepshajs · 2.91K subscribers
Post #80 2.05K
Почему useMemoCache в React Compiler использует массив, а не Map?

Давайте посмотрим, как реализован useMemoCache в компайлере:
const $empty = Symbol.for("react.memo_cache_sentinel");

export function c(size: number) {
return React.useState(() => {
const $ = new Array(size);

for (let ii = 0; ii < size; ii++) {
$[ii] = $empty;
}

[$empty] = true;
return $;
})[0];
}


Вопрос: Почему они используют именно массив, а не Map?
Как пришли к такому решению?
В одном из первых коммитов в React Compiler я нашёл ссылку на бенчмарк, в котором разработчики сравнили производительность разных способов наполнения массивов элементами, остановившись в итоге цикле for.

Изначально в useMemoCache использовался Array.prototype.fill, но он оказался примерно на 60% медленнее цикла с for.

Будет ли Map быстрее?
Я решил тоже написать свой бенчмарк и проверить))

Зададим те же условия, как и в оригинальном бенчмарке:
const sentinel = Symbol.for('sentinel'); 
let n=10;

И сравним победивший кейс из React Compiler
let a = new Array(n); for (let i=0; i<n; ++i) a[i] = sentinel;
С таким же кейсом, но на Map():
let a = new Map(); for (let i=0; i<n; ++i) a.set(i, sentinel);

Внезапно, массив отработал в 6 раз быстрее, чем Map().

Тут ещё важно учесть, что я нарочно добавлял в Map() элементы по одному. Я так сделал для того, чтобы максимально приблизиться к текущей реализации в хуке.

Но ведь Map() можно создавать и без цикла for. Можно ведь просто сразу передать в Map() заранее подготовленный iterable.

Этот кейс я тоже решил перепроверить в отдельном бенчмарке)) Результат меня удивил: наполнение Map по одному элементу через цикл for отработало на 11% быстрее, чем new Map(iterable). Причём, этот iterable ещё тоже надо сначала подготовить, это тоже займёт некоторое время (и память). А массив у нас уже и так есть.

Поэтому, кажется, обычный Array конкретно для этого случая всё-таки побеждает. Или я что-то упускаю?

P.S. Пост появился благодаря отличному комментарию из предыдущего поста.
  • 🔥 27
  • 👍 7
  • ❤ 2
More from @nepshajs
  1. Sep 30, 2026👨‍💻 Фронтенд с AI: что можно делегировать агентам 5 октября, стартует конференция Podlod…
  2. Jul 30, 2026Моё хобби — менять названия полей в тулах и смотреть, как это влияет на качество заполнени…
  3. Jul 20, 2026Расширил свой недавний доклад про работу с GigaChat API и расскажу его 25 июля на Технохаб…
  4. Jul 17, 2026Никогда ещё не уходил с митапа под таким сильным впечатлением, как вчера после JS x AI con…
  5. Jul 15, 2026Агентские фреймворки больше не нужны Мне стали часто попадаться видео автора Jake Van Clie…
  6. Jul 10, 2026JS x AI митап в Сбер.Среде Я тут недавно осознал, что я уже два с половиной года работаю с…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →