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

Question

Я использую React и material-ui. У меня есть веб-сокет, доставляющий 9000 сообщений в минуту.

В моем приложении «Реакция» имеется индикатор выполнения с определенным материалом-интерфейсом, который получает свое значение из сообщений веб-сокета. Индикатор выполнения не точно отражает значения, поступающие из сообщений веб-сокетов.

Я храню сообщения веб-сокетов в состоянии, поэтому пользовательский интерфейс часто выполняет повторную визуализацию.

Как выполнить избежать этой проблемы? Я не могу задушить сообщения, так как мне нужно, чтобы все сообщения сохранялись и обрабатывались. Заранее спасибо.

Answer 1

Вместо этого вы можете попытаться ограничить обновления своего состояния. Решение с использованием loda sh throttle может выглядеть примерно так:

const TOTAL = 100000;

const ProgressBar = ({socket}) => {
    const cache = useRef([]);
    const [messages, onMessage] = useState([]);

    useEffect(() => {
        const update = throttle(() => onMessage(cache.current), 500);

        const handleMessage = message => {
            cache.current = [...cache.current, message];
            update();
        }

        socket.on('message', handleMessage);

        return () => {
            update.cancel();
            socket.off('message', handleMessage);
        }
    }, []);

    return (
        <LinearProgress variant="determinate" value={messages.length / TOTAL} />
    );
};