refactor(fe): use useShallow access for improved performance (#24)

cjeongmin · web-flow · commit 925e9ff68c84 · 2025-01-16T17:08:21.000+09:00
refactor: use shallow state access for improved performance
diff --git a/apps/client/src/components/Header.tsx b/apps/client/src/components/Header.tsx
@@ -1,4 +1,5 @@
 import { Link, useNavigate } from '@tanstack/react-router';
+import { useShallow } from 'zustand/react/shallow';
 
 import { logout, useAuthStore } from '@/features/auth';
 import { useModal } from '@/features/modal';
@@ -7,7 +8,12 @@ import { useToastStore } from '@/features/toast';
 import { Button, SignInModal, SignUpModal } from '@/components';
 
 function Header() {
-  const { isLogin, clearAuthInformation: clearAccessToken } = useAuthStore();
+  const { isLogin, clearAuthInformation: clearAccessToken } = useAuthStore(
+    useShallow((state) => ({
+      isLogin: state.isLogin,
+      clearAuthInformation: state.clearAuthInformation,
+    })),
+  );
 
   const addToast = useToastStore((state) => state.addToast);
 
diff --git a/apps/client/src/components/modal/CreateQuestionModal.tsx b/apps/client/src/components/modal/CreateQuestionModal.tsx
@@ -1,6 +1,7 @@
 import { useMutation } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
 import Markdown from 'react-markdown';
+import { useShallow } from 'zustand/react/shallow';
 
 import { useModalContext } from '@/features/modal';
 import { useSessionStore } from '@/features/session';
@@ -14,11 +15,19 @@ interface CreateQuestionModalProps {
 }
 
 function CreateQuestionModal({ question }: CreateQuestionModalProps) {
-  const { addToast } = useToastStore();
-
   const { closeModal } = useModalContext();
 
-  const { sessionId, sessionToken, expired, addQuestion, updateQuestion } = useSessionStore();
+  const addToast = useToastStore((state) => state.addToast);
+
+  const { sessionId, sessionToken, expired, addQuestion, updateQuestion } = useSessionStore(
+    useShallow((state) => ({
+      sessionId: state.sessionId,
+      sessionToken: state.sessionToken,
+      expired: state.expired,
+      addQuestion: state.addQuestion,
+      updateQuestion: state.updateQuestion,
+    })),
+  );
 
   const [body, setBody] = useState('');
 
diff --git a/apps/client/src/components/modal/CreateReplyModal.tsx b/apps/client/src/components/modal/CreateReplyModal.tsx
@@ -1,6 +1,7 @@
 import { useMutation } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
 import Markdown from 'react-markdown';
+import { useShallow } from 'zustand/react/shallow';
 
 import { useModalContext } from '@/features/modal';
 import { useSessionStore } from '@/features/session';
@@ -17,9 +18,17 @@ interface CreateReplyModalProps {
 function CreateReplyModal({ question, reply }: CreateReplyModalProps) {
   const { closeModal } = useModalContext();
 
-  const { addToast } = useToastStore();
+  const addToast = useToastStore((state) => state.addToast);
 
-  const { sessionToken, sessionId, expired, addReply, updateReply } = useSessionStore();
+  const { sessionToken, sessionId, expired, addReply, updateReply } = useSessionStore(
+    useShallow((state) => ({
+      sessionToken: state.sessionToken,
+      sessionId: state.sessionId,
+      expired: state.expired,
+      addReply: state.addReply,
+      updateReply: state.updateReply,
+    })),
+  );
 
   const [body, setBody] = useState('');
 
diff --git a/apps/client/src/components/modal/SessionParticipantsModal.tsx b/apps/client/src/components/modal/SessionParticipantsModal.tsx
@@ -2,6 +2,7 @@ import { useMutation } from '@tanstack/react-query';
 import { isAxiosError } from 'axios';
 import { useEffect, useState } from 'react';
 import { IoClose } from 'react-icons/io5';
+import { useShallow } from 'zustand/react/shallow';
 
 import { useModalContext } from '@/features/modal';
 import { getSessionUsers, patchSessionHost, useSessionStore } from '@/features/session';
@@ -13,10 +14,19 @@ import Participant from '@/components/modal/Participant';
 function SessionParticipantsModal() {
   const { closeModal } = useModalContext();
 
-  const { addToast } = useToastStore();
-
   const { sessionUsers, sessionId, sessionToken, setSessionUsers, updateSessionUser, updateReplyIsHost } =
-    useSessionStore();
+    useSessionStore(
+      useShallow((state) => ({
+        sessionUsers: state.sessionUsers,
+        sessionId: state.sessionId,
+        sessionToken: state.sessionToken,
+        setSessionUsers: state.setSessionUsers,
+        updateSessionUser: state.updateSessionUser,
+        updateReplyIsHost: state.updateReplyIsHost,
+      })),
+    );
+
+  const addToast = useToastStore((state) => state.addToast);
 
   const [selectedUserId, setSelectedUserId] = useState<number>();
 
diff --git a/apps/client/src/components/qna/ChattingList.tsx b/apps/client/src/components/qna/ChattingList.tsx
@@ -1,5 +1,6 @@
 import { AnimatePresence, motion } from 'motion/react';
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { useShallow } from 'zustand/react/shallow';
 
 import { useSessionStore } from '@/features/session';
 import { getChattingList } from '@/features/session/chatting';
@@ -8,7 +9,16 @@ import { useSocket } from '@/features/socket';
 import ChattingMessage from '@/components/qna/ChattingMessage';
 
 function ChattingList() {
-  const { expired, chatting, participantCount, sessionId, sessionToken, addChattingToFront } = useSessionStore();
+  const { expired, chatting, participantCount, sessionId, sessionToken, addChattingToFront } = useSessionStore(
+    useShallow((state) => ({
+      expired: state.expired,
+      chatting: state.chatting,
+      participantCount: state.participantCount,
+      sessionId: state.sessionId,
+      sessionToken: state.sessionToken,
+      addChattingToFront: state.addChattingToFront,
+    })),
+  );
 
   const [message, setMessage] = useState('');
   const [isBottom, setIsBottom] = useState(true);
diff --git a/apps/client/src/components/qna/QuestionDetail.tsx b/apps/client/src/components/qna/QuestionDetail.tsx
@@ -1,6 +1,7 @@
 import { useNavigate } from '@tanstack/react-router';
 import { GoArrowLeft } from 'react-icons/go';
 import Markdown from 'react-markdown';
+import { useShallow } from 'zustand/react/shallow';
 
 import { useModal } from '@/features/modal';
 import { useSessionStore } from '@/features/session';
@@ -11,9 +12,14 @@ import ReplyItem from '@/components/qna/ReplyItem';
 function QuestionDetail() {
   const navigate = useNavigate();
 
-  const { questions, expired } = useSessionStore();
-
-  const { selectedQuestionId, setSelectedQuestionId } = useSessionStore();
+  const { questions, expired, selectedQuestionId, setSelectedQuestionId } = useSessionStore(
+    useShallow((state) => ({
+      questions: state.questions,
+      expired: state.expired,
+      selectedQuestionId: state.selectedQuestionId,
+      setSelectedQuestionId: state.setSelectedQuestionId,
+    })),
+  );
 
   const question = questions.find((q) => q.questionId === selectedQuestionId);
 
diff --git a/apps/client/src/components/qna/QuestionItem.tsx b/apps/client/src/components/qna/QuestionItem.tsx
@@ -7,6 +7,7 @@ import { GoCheck } from 'react-icons/go';
 import { GrClose, GrLike, GrLikeFill, GrPin } from 'react-icons/gr';
 import { RiQuestionAnswerLine } from 'react-icons/ri';
 import Markdown from 'react-markdown';
+import { useShallow } from 'zustand/react/shallow';
 
 import { useModal } from '@/features/modal';
 import { useSessionStore } from '@/features/session';
@@ -34,13 +35,17 @@ function QuestionItem({ question, onQuestionSelect }: QuestionItemProps) {
     <CreateQuestionModal question={question} />,
   );
 
-  const sessionToken = useSessionStore((state) => state.sessionToken);
-  const sessionId = useSessionStore((state) => state.sessionId);
-  const isHost = useSessionStore((state) => state.isHost);
-  const expired = useSessionStore((state) => state.expired);
-  const removeQuestion = useSessionStore((state) => state.removeQuestion);
-  const updateQuestion = useSessionStore((state) => state.updateQuestion);
-  const setFromDetail = useSessionStore((state) => state.setFromDetail);
+  const { sessionToken, sessionId, isHost, expired, removeQuestion, updateQuestion, setFromDetail } = useSessionStore(
+    useShallow((state) => ({
+      sessionToken: state.sessionToken,
+      sessionId: state.sessionId,
+      isHost: state.isHost,
+      expired: state.expired,
+      removeQuestion: state.removeQuestion,
+      updateQuestion: state.updateQuestion,
+      setFromDetail: state.setFromDetail,
+    })),
+  );
 
   const addToast = useToastStore((state) => state.addToast);
 
diff --git a/apps/client/src/components/qna/QuestionList.tsx b/apps/client/src/components/qna/QuestionList.tsx
@@ -3,6 +3,7 @@ import { motion } from 'motion/react';
 import { useMemo, useRef, useState } from 'react';
 import { GrValidate } from 'react-icons/gr';
 import { IoClose, IoShareSocialOutline } from 'react-icons/io5';
+import { useShallow } from 'zustand/react/shallow';
 
 import { useModal } from '@/features/modal';
 import { postSessionTerminate, useSessionStore } from '@/features/session';
@@ -15,14 +16,19 @@ import QuestionSection from '@/components/qna/QuestionSection';
 import SessionSettingsDropdown from '@/components/qna/SessionSettingsDropdown';
 
 function QuestionList() {
-  const isHost = useSessionStore((state) => state.isHost);
-  const expired = useSessionStore((state) => state.expired);
-  const questions = useSessionStore((state) => state.questions);
-  const sessionId = useSessionStore((state) => state.sessionId);
-  const sessionTitle = useSessionStore((state) => state.sessionTitle);
-  const sessionToken = useSessionStore((state) => state.sessionToken);
-  const setExpired = useSessionStore((state) => state.setExpired);
-  const setSelectedQuestionId = useSessionStore((state) => state.setSelectedQuestionId);
+  const { isHost, expired, questions, sessionId, sessionTitle, sessionToken, setExpired, setSelectedQuestionId } =
+    useSessionStore(
+      useShallow((state) => ({
+        isHost: state.isHost,
+        expired: state.expired,
+        questions: state.questions,
+        sessionId: state.sessionId,
+        sessionTitle: state.sessionTitle,
+        sessionToken: state.sessionToken,
+        setExpired: state.setExpired,
+        setSelectedQuestionId: state.setSelectedQuestionId,
+      })),
+    );
 
   const addToast = useToastStore((state) => state.addToast);
 
diff --git a/apps/client/src/components/qna/ReplyItem.tsx b/apps/client/src/components/qna/ReplyItem.tsx
@@ -4,6 +4,7 @@ import { useCallback } from 'react';
 import { FiEdit2 } from 'react-icons/fi';
 import { GrClose, GrLike, GrLikeFill, GrValidate } from 'react-icons/gr';
 import Markdown from 'react-markdown';
+import { useShallow } from 'zustand/react/shallow';
 
 import { useModal } from '@/features/modal';
 import { useSessionStore } from '@/features/session';
@@ -19,9 +20,17 @@ interface ReplyItemProps {
 }
 
 function ReplyItem({ question, reply }: ReplyItemProps) {
-  const { addToast } = useToastStore();
+  const addToast = useToastStore((state) => state.addToast);
 
-  const { sessionId, sessionToken, isHost, expired, updateReply } = useSessionStore();
+  const { sessionId, sessionToken, isHost, expired, updateReply } = useSessionStore(
+    useShallow((state) => ({
+      sessionId: state.sessionId,
+      sessionToken: state.sessionToken,
+      isHost: state.isHost,
+      expired: state.expired,
+      updateReply: state.updateReply,
+    })),
+  );
 
   const { Modal: CreateReply, openModal: openCreateReplyModal } = useModal(
     <CreateReplyModal question={question} reply={reply} />,
diff --git a/apps/client/src/features/auth/auth.hook.ts b/apps/client/src/features/auth/auth.hook.ts
@@ -13,9 +13,9 @@ import { ValidationStatusWithMessage } from '@/shared';
 export function useSignInForm() {
   const router = useRouterState();
 
-  const { setAuthInformation } = useAuthStore();
+  const setAuthInformation = useAuthStore((state) => state.setAuthInformation);
 
-  const { addToast } = useToastStore();
+  const addToast = useToastStore((state) => state.addToast);
 
   const [email, setEmail] = useState('');
 
diff --git a/apps/client/src/features/session/session.util.ts b/apps/client/src/features/session/session.util.ts
@@ -9,13 +9,9 @@ export interface LoadSessionOptions {
   sessionId: string;
   questionId?: string; // questionId가 필요한 경우만 사용
   skipRefresh?: boolean; // 이미 로그인/refresh 검증을 밖에서 했으면 생략
-  fromDetailBehavior?: boolean; // fromDetail 관련 로직 처리 여부
+  fromDetailBehavior?: boolean;
 }
 
-/**
- * 세션 & QnA & 채팅 정보를 한 번에 로드해 주는 유틸.
- * 에러가 발생하면 내부에서 redirect를 throw할 수 있음.
- */
 export async function loadSessionData(options: LoadSessionOptions) {
   const { sessionId, questionId, skipRefresh = false, fromDetailBehavior = false } = options;
 
diff --git a/apps/client/src/features/socket/socket.context.tsx b/apps/client/src/features/socket/socket.context.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable import/prefer-default-export */
 import { createContext, ReactNode, useEffect, useMemo, useState } from 'react';
+import { useShallow } from 'zustand/react/shallow';
 
 import { useSessionStore } from '@/features/session';
 import { SocketService } from '@/features/socket/socket.service';
@@ -15,9 +16,13 @@ interface SocketProviderProps {
 }
 
 export function SocketProvider({ children }: SocketProviderProps) {
-  const expired = useSessionStore((state) => state.expired);
-  const sessionId = useSessionStore((state) => state.sessionId);
-  const sessionToken = useSessionStore((state) => state.sessionToken);
+  const { expired, sessionId, sessionToken } = useSessionStore(
+    useShallow((state) => ({
+      expired: state.expired,
+      sessionId: state.sessionId,
+      sessionToken: state.sessionToken,
+    })),
+  );
 
   const [socket, setSocket] = useState<SocketService>();
 
diff --git a/apps/client/src/pages/HomePage.tsx b/apps/client/src/pages/HomePage.tsx
@@ -7,7 +7,7 @@ import { useModal } from '@/features/modal';
 import { Button, CreateSessionModal, FeatureCard } from '@/components';
 
 function HomePage() {
-  const { isLogin } = useAuthStore();
+  const isLogin = useAuthStore((state) => state.isLogin);
 
   const { Modal: CreateSession, openModal: openCreateSessionModal } = useModal(<CreateSessionModal />);
 
