zustand и redux-devtools

Я всё ещё пытаюсь доделать свой пет-проект для построения графиков на основе данных из пул реквестов и комментариев.

В качестве стейтменеджера использую zustand. Своих девтулзов у него нет, но разработчики реализовали middleware для отображения данных в redux-devtools.

При использовании zustand’а часто создают много маленьких сторов, поэтому чтобы не оборачивать каждый вызов create в middleware — пишем небольшой утилитный метод createStore:

 
import { create } from 'zustand';
import { devtools } from 'zustand/middleware';
 
export const createStore = <T>(fn: Parameters<typeof devtools<T>>[0], name: string) => {
  return create<T>()(devtools(fn, { name, enabled: process.env.NODE_ENV !== 'production' }));
};
 

Через некоторое время заметил, что при обновлении стейта проседает производительность — показ диалога занимает 2 секунды.

Нашёл 2 проблемы:

1. Стандартная. Весь контент страницы был в одном компоненте, поэтому при обновлении локального стейта перерендеривались все компоненты.

✅ Решение простое — вынес все 20+ графиков в отдельный компонент и обернул его в React.memo.

2. Работает быстрее, но всё ещё есть небольшая задержка. Девтулзы реакта ничего не показывают — запускаю стандартные девтулзы хрома. Вижу, что большую часть времени занимает не обновление стейта, а какой-то левый скрипт. Перехожу в его исходники и вижу там слово “Redux”.

ℹ️ Отключаем redux-devtools и всё работает очень быстро.

❓Всё дело в том, что у меня в сторе хранятся все пулреквесты (4000) и комментарии (5200) за год, из-за такого количества данных redux-devtools подтормаживает.

В общем, проблема не всегда в вашем коде, но это в любом случае — это ваша проблема 😄.