perf: add Zustand selectors to prevent cascading re-renders

Replace all bare useAuthStore(), useBlockingStore(), and
useSuccessNotification() calls with individual field selectors.
This prevents components from re-rendering when unrelated store
fields change.

- 21 useAuthStore usages across 20 files: individual selectors
  for 1-2 fields, useShallow for 3+ fields
- 5 useBlockingStore usages: individual selectors
- 2 useSuccessNotification usages: individual selectors
This commit is contained in:
Fringg
2026-02-23 17:15:30 +03:00
parent 30ece694d4
commit 03ad255bf1
22 changed files with 70 additions and 26 deletions

View File

@@ -5,6 +5,7 @@ import { useState, useEffect } from 'react';
import { initDataUser } from '@telegram-apps/sdk-react';
import { useAuthStore } from '@/store/auth';
import { useShallow } from 'zustand/shallow';
import { useTheme } from '@/hooks/useTheme';
import { usePlatform } from '@/platform';
import {
@@ -77,7 +78,9 @@ export function AppHeader({
}: AppHeaderProps) {
const { t } = useTranslation();
const location = useLocation();
const { user, logout, isAdmin } = useAuthStore();
const { user, logout, isAdmin } = useAuthStore(
useShallow((state) => ({ user: state.user, logout: state.logout, isAdmin: state.isAdmin })),
);
const { toggleTheme, isDark } = useTheme();
const { haptic, platform } = usePlatform();
const [userPhotoUrl, setUserPhotoUrl] = useState<string | null>(null);