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

src/App.tsx

@@ -90,7 +90,8 @@ const AdminPinnedMessageCreate = lazy(() => import('./pages/AdminPinnedMessageCr
 const AdminEmailTemplatePreview = lazy(() => import('./pages/AdminEmailTemplatePreview'));
 
 function ProtectedRoute({ children }: { children: React.ReactNode }) {
-  const { isAuthenticated, isLoading } = useAuthStore();
+  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
+  const isLoading = useAuthStore((state) => state.isLoading);
   const location = useLocation();
 
   if (isLoading) {
@@ -107,7 +108,9 @@ function ProtectedRoute({ children }: { children: React.ReactNode }) {
 }
 
 function AdminRoute({ children }: { children: React.ReactNode }) {
-  const { isAuthenticated, isLoading, isAdmin } = useAuthStore();
+  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
+  const isLoading = useAuthStore((state) => state.isLoading);
+  const isAdmin = useAuthStore((state) => state.isAdmin);
   const location = useLocation();
 
   if (isLoading) {
@@ -133,7 +136,7 @@ function LazyPage({ children }: { children: React.ReactNode }) {
 }
 
 function BlockingOverlay() {
-  const { blockingType } = useBlockingStore();
+  const blockingType = useBlockingStore((state) => state.blockingType);
 
   if (blockingType === 'maintenance') {
     return <MaintenanceScreen />;

src/components/SuccessNotificationModal.tsx

@@ -78,7 +78,9 @@ const CloseIcon = () => (
 export default function SuccessNotificationModal() {
   const { t } = useTranslation();
   const navigate = useNavigate();
-  const { isOpen, data, hide } = useSuccessNotification();
+  const isOpen = useSuccessNotification((state) => state.isOpen);
+  const data = useSuccessNotification((state) => state.data);
+  const hide = useSuccessNotification((state) => state.hide);
   const { formatAmount, currencySymbol } = useCurrency();
   const { safeAreaInset, contentSafeAreaInset, isTelegramWebApp } = useTelegramSDK();
   const haptic = useHaptic();

src/components/TicketNotificationBell.tsx

@@ -33,7 +33,7 @@ export default function TicketNotificationBell({ isAdmin = false }: TicketNotifi
   const { t } = useTranslation();
   const navigate = useNavigate();
   const queryClient = useQueryClient();
-  const { isAuthenticated } = useAuthStore();
+  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
   const { showToast } = useToast();
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);

src/components/WebSocketNotifications.tsx

@@ -18,9 +18,9 @@ export default function WebSocketNotifications() {
   const navigate = useNavigate();
   const queryClient = useQueryClient();
   const { showToast } = useToast();
-  const { refreshUser } = useAuthStore();
+  const refreshUser = useAuthStore((state) => state.refreshUser);
   const { formatAmount, currencySymbol } = useCurrency();
-  const { show: showSuccessModal } = useSuccessNotification();
+  const showSuccessModal = useSuccessNotification((state) => state.show);
 
   const handleMessage = useCallback(
     (message: WSMessage) => {

src/components/blocking/BlacklistedScreen.tsx

@@ -3,7 +3,7 @@ import { useBlockingStore } from '../../store/blocking';
 
 export default function BlacklistedScreen() {
   const { t } = useTranslation();
-  const { blacklistedInfo } = useBlockingStore();
+  const blacklistedInfo = useBlockingStore((state) => state.blacklistedInfo);
 
   return (
     <div className="fixed inset-0 z-[100] flex flex-col items-center justify-center bg-dark-950 p-6">

src/components/blocking/ChannelSubscriptionScreen.tsx

@@ -7,7 +7,8 @@ const CHECK_COOLDOWN_SECONDS = 5;
 
 export default function ChannelSubscriptionScreen() {
   const { t } = useTranslation();
-  const { channelInfo, clearBlocking } = useBlockingStore();
+  const channelInfo = useBlockingStore((state) => state.channelInfo);
+  const clearBlocking = useBlockingStore((state) => state.clearBlocking);
   const [isChecking, setIsChecking] = useState(false);
   const [cooldown, setCooldown] = useState(0);
   const [error, setError] = useState<string | null>(null);

src/components/blocking/MaintenanceScreen.tsx

@@ -3,7 +3,7 @@ import { useBlockingStore } from '../../store/blocking';
 
 export default function MaintenanceScreen() {
   const { t } = useTranslation();
-  const { maintenanceInfo } = useBlockingStore();
+  const maintenanceInfo = useBlockingStore((state) => state.maintenanceInfo);
 
   return (
     <div className="fixed inset-0 z-[100] flex flex-col items-center justify-center bg-dark-950 p-6">

src/components/layout/AppShell/AppHeader.tsx

@@ -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);

src/components/layout/AppShell/AppShell.tsx

@@ -193,7 +193,8 @@ interface AppShellProps {
 export function AppShell({ children }: AppShellProps) {
   const { t } = useTranslation();
   const location = useLocation();
-  const { isAdmin, logout } = useAuthStore();
+  const isAdmin = useAuthStore((state) => state.isAdmin);
+  const logout = useAuthStore((state) => state.logout);
   const { isFullscreen, safeAreaInset, contentSafeAreaInset, platform, isMobile } =
     useTelegramSDK();
   const haptic = useHaptic();

src/components/layout/AppShell/DesktopSidebar.tsx

@@ -49,7 +49,8 @@ export function DesktopSidebar({
 }: DesktopSidebarProps) {
   const { t } = useTranslation();
   const location = useLocation();
-  const { user, logout } = useAuthStore();
+  const user = useAuthStore((state) => state.user);
+  const logout = useAuthStore((state) => state.logout);
   const { haptic } = usePlatform();
 
   // Branding

src/components/navigation/CommandPalette/CommandPalette.tsx

@@ -62,7 +62,7 @@ export function CommandPalette({
   const { t } = useTranslation();
   const navigate = useNavigate();
   const { haptic } = usePlatform();
-  const { isAdmin } = useAuthStore();
+  const isAdmin = useAuthStore((state) => state.isAdmin);
   const { toggleTheme, isDark } = useTheme();
   const [search, setSearch] = useState('');
 

src/hooks/useFeatureFlags.ts

@@ -6,7 +6,7 @@ import { contestsApi } from '@/api/contests';
 import { pollsApi } from '@/api/polls';
 
 export function useFeatureFlags() {
-  const { isAuthenticated } = useAuthStore();
+  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
 
   const { data: referralTerms } = useQuery({
     queryKey: ['referral-terms'],

src/pages/Balance.tsx

@@ -40,7 +40,7 @@ const WalletIcon = ({ className = 'h-8 w-8' }: { className?: string }) => (
 
 export default function Balance() {
   const { t } = useTranslation();
-  const { refreshUser } = useAuthStore();
+  const refreshUser = useAuthStore((state) => state.refreshUser);
   const queryClient = useQueryClient();
   const { formatAmount, currencySymbol } = useCurrency();
   const [searchParams] = useSearchParams();

src/pages/Connection.tsx

@@ -14,7 +14,8 @@ import InstallationGuide from '../components/connection/InstallationGuide';
 export default function Connection() {
   const { t, i18n } = useTranslation();
   const navigate = useNavigate();
-  const { user, isAdmin } = useAuthStore();
+  const user = useAuthStore((state) => state.user);
+  const isAdmin = useAuthStore((state) => state.isAdmin);
   const { isTelegramWebApp } = useTelegramSDK();
   const { impact: hapticImpact } = useHaptic();
 

src/pages/Dashboard.tsx

@@ -48,14 +48,15 @@ const RefreshIcon = ({ className = 'w-4 h-4' }: { className?: string }) => (
 
 export default function Dashboard() {
   const { t } = useTranslation();
-  const { user, refreshUser } = useAuthStore();
+  const user = useAuthStore((state) => state.user);
+  const refreshUser = useAuthStore((state) => state.refreshUser);
   const queryClient = useQueryClient();
   const navigate = useNavigate();
   const { formatAmount, currencySymbol, formatPositive } = useCurrency();
   const [trialError, setTrialError] = useState<string | null>(null);
   const { isCompleted: isOnboardingCompleted, complete: completeOnboarding } = useOnboarding();
   const [showOnboarding, setShowOnboarding] = useState(false);
-  const { blockingType } = useBlockingStore();
+  const blockingType = useBlockingStore((state) => state.blockingType);
 
   // Refresh user data on mount
   useEffect(() => {

src/pages/Login.tsx

@@ -3,6 +3,7 @@ import { useNavigate, useLocation } 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 { authApi } from '../api/auth';
 import { isValidEmail } from '../utils/validation';
 import {
@@ -32,7 +33,15 @@ export default function Login() {
     loginWithTelegram,
     loginWithEmail,
     registerWithEmail,
-  } = useAuthStore();
+  } = useAuthStore(
+    useShallow((state) => ({
+      isAuthenticated: state.isAuthenticated,
+      isLoading: state.isLoading,
+      loginWithTelegram: state.loginWithTelegram,
+      loginWithEmail: state.loginWithEmail,
+      registerWithEmail: state.registerWithEmail,
+    })),
+  );
 
   // Get referral code from localStorage (captured from ?ref= param at module level in auth store)
   const referralCode = getPendingReferralCode() || '';

src/pages/OAuthCallback.tsx

@@ -26,7 +26,8 @@ export default function OAuthCallback() {
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
   const [error, setError] = useState('');
-  const { loginWithOAuth, isAuthenticated } = useAuthStore();
+  const loginWithOAuth = useAuthStore((state) => state.loginWithOAuth);
+  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
 
   useEffect(() => {
     if (isAuthenticated) {

src/pages/Profile.tsx

@@ -61,7 +61,8 @@ const PencilIcon = () => (
 
 export default function Profile() {
   const { t } = useTranslation();
-  const { user, setUser } = useAuthStore();
+  const user = useAuthStore((state) => state.user);
+  const setUser = useAuthStore((state) => state.setUser);
   const queryClient = useQueryClient();
 
   const [email, setEmail] = useState('');

src/pages/TelegramCallback.tsx

@@ -8,7 +8,8 @@ export default function TelegramCallback() {
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
   const [error, setError] = useState('');
-  const { loginWithTelegramWidget, isAuthenticated } = useAuthStore();
+  const loginWithTelegramWidget = useAuthStore((state) => state.loginWithTelegramWidget);
+  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
 
   useEffect(() => {
     if (isAuthenticated) {

src/pages/TelegramRedirect.tsx

@@ -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(() => {

src/pages/VerifyEmail.tsx

@@ -3,6 +3,7 @@ import { useSearchParams, Link, useNavigate } from 'react-router';
 import { useTranslation } from 'react-i18next';
 import { authApi } from '../api/auth';
 import { useAuthStore } from '../store/auth';
+import { useShallow } from 'zustand/shallow';
 import { consumeCampaignSlug } from '../utils/campaign';
 import { tokenStorage } from '../utils/token';
 import LanguageSwitcher from '../components/LanguageSwitcher';
@@ -13,7 +14,13 @@ export default function VerifyEmail() {
   const [searchParams] = useSearchParams();
   const [status, setStatus] = useState<'loading' | 'success' | 'error'>('loading');
   const [error, setError] = useState('');
-  const { setTokens, setUser, checkAdminStatus } = useAuthStore();
+  const { setTokens, setUser, checkAdminStatus } = useAuthStore(
+    useShallow((state) => ({
+      setTokens: state.setTokens,
+      setUser: state.setUser,
+      checkAdminStatus: state.checkAdminStatus,
+    })),
+  );
   const hasVerified = useRef(false);
 
   useEffect(() => {

src/providers/WebSocketProvider.tsx

@@ -9,7 +9,8 @@ export type { WSMessage } from './WebSocketContext';
 const isDev = import.meta.env.DEV;
 
 export function WebSocketProvider({ children }: { children: React.ReactNode }) {
-  const { accessToken, isAuthenticated } = useAuthStore();
+  const accessToken = useAuthStore((state) => state.accessToken);
+  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
   const wsRef = useRef<WebSocket | null>(null);
   const reconnectTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const pingIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);