Sneaky React Memory Leaks: How the React compiler won't save you

Sneaky React Memory Leaks: How the React compiler won't save you

Интересная статья про утечку памяти в React. Если коротко, то когда вы используете хуки, вы создаете замыкание на контекст рендер функции. Если в этом контексте будет больший объект, созданный во время рендера, то сборщик мусора не сможет его собрать (ведь он доступен через замыкания). Пока выглядит, что криминала нет, но по факту может случится следующее - при каждом новом рендере будет создаваться новое замыкание на новый контекст и при этом будет оставаться замыкания на старый контекст, что приведет к созданию двух объектов, которые не может почистить сборщик мусора.

import { useState, useCallback } from "react";

class BigObject {
  public readonly data = new Uint8Array(1024 * 1024 * 10);
}

export const App = () => {
  const [countA, setCountA] = useState(0);
  const [countB, setCountB] = useState(0);
  const bigData = new BigObject(); // 10MB of data

  const handleClickA = useCallback(() => {
    setCountA(countA + 1);
  }, [countA]);

  const handleClickB = useCallback(() => {
    setCountB(countB + 1);
  }, [countB]);

  // This only exists to demonstrate the problem
  const handleClickBoth = () => {
    handleClickA();
    handleClickB();
    console.log(bigData.data.length);
  };

  return (
    <div>
      <button onClick={handleClickA}>Increment A</button>
      <button onClick={handleClickB}>Increment B</button>
      <button onClick={handleClickBoth}>Increment Both</button>
      <p>
        A: {countA}, B: {countB}
      </p>
    </div>
  );
};

Один из разработчиков React compiler сказал, что эта проблема решена в компиляторе. Автор проверил это и пришел к выводу, что проблема находится в квантовой суперпозиции - она и решена и не решена одновременно. Как такое может быть?

Конкретно этот кейс с большой переменной решился тем, что компилятор видит, что объект ни от кого не зависит и его можно агрессивно закешировать. Что он и делает

const bigData = useMemo(() => new BigObject(), [])

Однако проблема снова появляется, если мы сделаем переменную зависимой от стейта. Тогда компилятор не будет считать эту переменную безопасной для кэшированя

const bigData = new BigObject(`${countA}/${countB}`);

Вот так вот, проблема и решена (конкретный кейс) и не решена (в общем виде).

В данном случае проблема не в React, а в том, что React использует подходы функционального программирования в языке, где нет достаточного количества оптимизаций для таких подходов. Условно, если бы движок создавал замыкание и держал от сборщика мусора только то, что реально используется - проблемы бы не было. Но движки работают как работают и проблема есть

Поэтому важно следовать простым правилам:
- Пишите маленькие компоненты
- Пишите чистые компоненты
- Используйте кастомные функции и хуки
- Профилируйте память


https://schiener.io/2024-07-07/react-closures-compiler

#development #javascript #react #performance #memoryLeak #reactCompiler

How to Use React Compiler – A Complete Guide

Огромная статья, рассказывающая про то, как работает React Compiler. Статья рассказывает, из чего состоит React Compiler как внутри себя, так и через какие инструменты он подключается в проект.

Также в статье показывается на простом кейсе, как React compiler упрощает работу разработчика на практике.

Статья не очень глубока с технической точки зрения, но очень хорошо верхнеуровнево объясняет, что такое этот React Compiler и как он работает с практической точки зрения - объясняется, что происходит с кодом, который я пишу, и что мне необходимо было бы сделать самому для достижения того же результата

https://www.freecodecamp.org/news/react-compiler-complete-guide-react-19/

#development #javascript #react #reactCompiler #recommended

Adopting the compiler in Sanity Studio

Sanity Studio - приложение для создания и редактирования контента (не до конца понял каокго) с режимом совместной работы и постоянной синхронизацией. Приложение реализовано на React и команда решила попробовать подключить react compiler в свой проект.

Если совсем коротко: Sanity Studio подключили react compiler и он обнаружил проблемы в коде и ускорил рендер приложения.

Я сразу признаюсь, что не до конца вкурил про что там челы пишут (т.к. до сих пор не до конца понимаю что такое react compiler). Но основные поинты такие:
- eslint-plugin-react-compiler хорошо работает как детектор багов. Он находит места, которые работают неправильно
- babel-plugin-react-compiler вскрывает проблемы react-кода приложения

Когда ребята включили компайлер в коде своего редактора, куча e2e тестов попадала. Во время расследования, почему так случилось, выяснилось, что раньше тесты проходили, но это были ложно-положительные прохождения. Т.е. код изначально плохо работал в некоторых случаях, а react compiler сделал так, что эти случаи стали заметны.

Также ребята инженерно подошли к включению компайлера в код и замерили, насколько ускорился рендер приложения. Для тестов перформанса они используют свои юзкейсы - скорость редактирования контента. Разные кейсы ускорились по разному, но в целом ускорение составило от 5% до 33%, что весьма внушительно.

Также компайлер подсветил кучу кода, который компайлер не может оптимизировать. Часть этого кода действительно нуждается в рефакторинге. Другая часть валидная и необходимо ждать пока компайлер научится работать с такими паттернами.

В общем, звучит круто. Какие советы дает автор:
- Подключайте eslint-plugin-react-compiler и фиксите баги
- Подключайте babel-plugin-react-compiler на тестовых стендах чтоб убедиться, что приложение стало работать лучше и нет багов
- Используйте react-compiler-runtime чтобы ускорить приложение
- Инкрементально рефакторите код, который компилятор пропускает


https://github.com/reactwg/react-compiler/discussions/33

#development #javascript #react #reactCompiler #react18

React Compiler v1.0

Вышел React Compiler v1.0. Его можно поставить и, по заверениям разработчиков, забыть о ручном менеджменте useMemo, useCallback, React.memo в 99% кейсах - теперь эту работу должен забрать на себя React Compiler. В остальных 1% кейсов можно заняться ручной оптимизацией для достижения лучших результатов.

React Compiler уже используется в приложениях. Например в Meta Quest Store - магазин приложений для VR гарнитуры Oculus Quest. Использование React Compiler ускорило работу навигации на 12%, а некоторые взаимодействия ускорились в 2.5 раза.

Штош, ждем посты на хабре и доклады на конфах про то, как люди включили React Compiler и их сайт ускорился или им пришлось потратить неделю на поиск бага.

https://react.dev/blog/2025/10/07/react-compiler-1

#development #javascript #react #reactCompiler