Как остановить рендеринг React с помощью хуков, чтобы заморозить определенную часть пользовательского интерфейса, которая не используется активно, но дорогая

Question

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

Как на время остановить обновления и остановить рендеринг?

Answer 1

Мы пришли к использованию useMemo() и сделали небольшой крючок-обертку под названием useFreeze(), который может легко остановить рендеринг.

import {useMemo} from "react";

let changing = 0;
export function useFreeze(renderer, frozen) {
    if (!frozen)
        changing = (changing + 1) % 100;
    return useMemo(renderer, [changing]);
}