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

@@ -3,6 +3,7 @@ import { useNavigate, useSearchParams } from 'react-router';
import { useTranslation } from 'react-i18next';
import { useQuery } from '@tanstack/react-query';
import { useAuthStore } from '../store/auth';
import { useShallow } from 'zustand/shallow';
import { brandingApi } from '../api/branding';
import { isInTelegramWebApp, getTelegramInitData } from '../hooks/useTelegramSDK';
@@ -33,7 +34,17 @@ export default function TelegramRedirect() {
const { t } = useTranslation();
const navigate = useNavigate();
const [searchParams] = useSearchParams();
const { loginWithTelegram, isAuthenticated, isLoading: authLoading } = useAuthStore();
const {
loginWithTelegram,
isAuthenticated,
isLoading: authLoading,
} = useAuthStore(
useShallow((state) => ({
loginWithTelegram: state.loginWithTelegram,
isAuthenticated: state.isAuthenticated,
isLoading: state.isLoading,
})),
);
const [status, setStatus] = useState<'loading' | 'success' | 'error' | 'not-telegram'>('loading');
const [errorMessage, setErrorMessage] = useState('');
const [retryCount, setRetryCount] = useState(() => {