Утечка памяти в React: Как useCallback и замыкания могут подставить вас

Краткая справка о замыканиях

function createCounter() {
  const unused = 0; // Эта переменная не используется во внутренней функции 
  let count = 0; // Эта переменная используется во внутренней функции
  return function () {
    count++;
    console.log(count);
  };
}

const counter = createCounter();
counter(); // 1
counter(); // 2

function first() {
  const firstVar = 1;
  function second() {
    // Это замыкание видит из внешнего окружения переменную firstVar 
    const secondVar = 2;
    function third() {
      // Это замыкание видит из внешнего окружения переменные firstVar и secondVar
      console.log(firstVar, secondVar);
    }
    return third;
  }
  return second();
}

const fn = first(); // Выполнение функции first выполнит second и вернет функцию third
fn(); // logs 1, 2

Замыкания и React

import { useState, useEffect } from "react";

function App({ id }) {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1); // Это замыкание над переменной count
  };

  useEffect(() => {
    console.log(id); // это замыкание над переменной id, переданной в пропсах(prop)
  }, [id]);

  return (
    <div>
      <p>{count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

Замыкания и useCallback

import React, { useState, useCallback } from "react";

function App() {
  const [count, setCount] = useState(0);

  const handleEvent = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <p>{count}</p>
      <ExpensiveChildComponent onMyEvent={handleEvent} />
    </div>
  );
}

import { useState, useCallback } from "react";

class BigObject {
  public readonly data = new Uint8Array(1024 * 1024 * 10); // создаем архив размером 10MB
}

function App() {
  const [count, setCount] = useState(0);
  const bigData = new BigObject();

  const handleEvent = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  const handleClick = () => {
    console.log(bigData.data.length);
  };

  return (
    <div>
      <button onClick={handleClick} />
      <ExpensiveChildComponent2 onMyEvent={handleEvent} />
    </div>
  );
}

Бесконечная утечка памяти с useCallback + замыкания + большие объекты

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

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

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

  // Эта функция создана для демонстрации проблемы
  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>
  );
};

0. First render:

1. Нажмем на «Increment A»:

2. Нажмем на «Increment B»:

1. Второй вызов «Increment A»:

Общая проблема в двух словах

Дом, который построил Джек.

Вот несколько факторов, которые повышают вероятность того, что вы столкнетесь с этой проблемой:

Как избежать утечек памяти, используя замыкания и useCallback?

Заключение

PS