perf(profile): improve rendering performance and selector efficiency
Some checks failed
Frontend CI / ota-android (push) Successful in 1m35s
Frontend CI / ota-ios (push) Successful in 1m34s
Frontend CI / build-and-push-web (push) Successful in 2m48s
Frontend CI / build-android-apk (push) Failing after 12m16s

Optimize profile-related screens and components by implementing memoization and granular Zustand selectors to reduce unnecessary re-renders.

- **Performance Optimization**:
  - Wrap `TabBar` in `React.memo` to prevent re-renders when parent components update.
  - Refactor `UserProfileScreen` to use a memoized `ProfileListHeader` component, decoupling the user header from tab state changes.
- **State Management**:
  - Replace object destructuring from `useAuthStore` with granular selectors (e.g., `useAuthStore((s) => s.logout)`) in `AccountDeletionScreen`, `EditProfileScreen`, `FollowListScreen`, and `SettingsScreen` to prevent re-renders on unrelated store changes.
- **Code Cleanup**:
  - Remove redundant case logic in `useUserProfile` hook.
This commit is contained in:
2026-05-18 01:06:46 +08:00
parent 4fde3e403a
commit 7a17323e8d
7 changed files with 102 additions and 60 deletions

View File

@@ -180,7 +180,7 @@ export const AccountDeletionScreen: React.FC = () => {
const router = useRouter();
const { isMobile } = useResponsive();
const insets = useSafeAreaInsets();
const { logout } = useAuthStore();
const logout = useAuthStore((s) => s.logout);
const [status, setStatus] = useState<DeletionStatusDTO | null>(null);
const [loading, setLoading] = useState(true);
const [submitting, setSubmitting] = useState(false);