레이아웃 컴포넌트 리렌더링 최적화 #164
Comments
rhino-ty
added a commit
that referenced
this issue
Dec 4, 2024
11 tasks
11 tasks
rhino-ty
added a commit
that referenced
this issue
Dec 4, 2024
rhino-ty
added a commit
that referenced
this issue
Dec 4, 2024
rhino-ty
added a commit
that referenced
this issue
Dec 4, 2024
…ion and modular architecture (#194) * chore: Remove @tanstack/react-query * refactor: Extract checkProduction logic from api.config.ts * refactor: Optimize re-rendering with individual selectors and memo - Wrap PlayerCardList component with memo to prevent unnecessary re-renders - Replace object destructuring from useGameSocketStore with individual selectors - Split store access into separate selectors for better performance: - players - hostId - roundAssignedRole - currentPlayerId - Maintain same functionality while reducing re-renders from unrelated state changes * refactor(Chat): split Chat component into modular components and optimize performance - Decompose monolithic Chat component into smaller focused components: - ChatContainer: Top-level socket management - ChatList: Message display and scroll management - ChatInput: Message input and submission - ChatBubble: Individual message UI - Add memo to all components to prevent unnecessary re-renders - Implement individual selectors for Zustand store access - Enhance useDrawingSocket hook with submitDrawing event handler - Improve code organization and separation of concerns * fix: Modify mobile-web-app-capable * refactor: Optimize performance of Setting component - Optimize state subscription - Prevent unnecessary re-renders by separating useGameSocketStore selectors - Change to individually subscribe only to roomSettings and isHost states - Component memoization - Apply memo to Setting component - Memoize handleSettingChange callback function with useCallback - Improve component structure - Separate concerns by extracting SettingContent component - Define RoomSettingItem type and separate setting constants - Reduce unnecessary JSX nesting - Enhance type safety - Add SettingKey type alias - Export RoomSettingItem interface for reusability * Merge branch 'develop' into refactor/#164 * feat: Enhance SHORTCUT_KEYS with additional information and Korean support - Rename SHORTCUT_KEY to SHORTCUT_KEYS for consistency - Add description for each shortcut - Include alternative keys for most shortcuts - Add Korean character alternatives for game-related shortcuts - Group shortcuts by category (settings and game-related) - Change number keys for dropdown settings (1, 2, 3 instead of q, w, e) - Use 'as const' for type safety * feat: Implement useShortcuts custom hook for advanced shortcut handling - Create useShortcuts custom hook for managing keyboard shortcuts - Add support for main and alternative keys defined in SHORTCUT_KEYS - Implement shortcut disabling for input elements (input, textarea, select) - Allow dynamic configuration of shortcuts with action and disabled state - Prevent default browser behavior when shortcut is triggered - Ensure proper cleanup of event listener on component unmount * feat: Apply useShortcuts hook across components for shortcut functionality - Add useShortcuts hook • ChatInput • InviteButton • StartButton • Setting • SettingItem • Dropdown - Integrate useShortcuts in useDropdown and useStartButton hooks - Update ROOM_SETTINGS to include shortcutKey for each setting item - Replace individual keydown event listeners with useShortcuts hook - Enhance code consistency and maintainability across the application * refactor: Remove console.log on useDrawingSocket, createSocket * refactor: Implement zustand selectors across components and hooks - Replace direct zustand store access with selectors • InviteButton • NavigationModal • RoleModal • RoundEndModal • QuizStage • ToastContainer • BrowserNavigationGuard • GameHeader • GameLayout - Update hooks to use zustand selectors • useCreateRoom • useTimer • useDrawingState • useChatSocket • useDrawingSocket • useGameSocket - Improve performance by minimizing unnecessary re-renders - Enhance code readability and maintainability * fix: Resolve timer decrement issue in game by updating useTimer hook's dependency array and interval management * feat: Extract Timer store from gameSocket.store.ts to reduce unnecessary re-renders - Created a dedicated Timer store using Zustand to manage timer states. - Implemented actions for updating, decreasing, and resetting timers. - Ensured that the Timer store operates independently to enhance performance and maintainability. * feat: Modify Timer logic - Changed the source of the timer logic from the game socket store to the timer store - Improved performance by preventing unnecessary re-renders with an independent timer store * feat: Add win or loss sound * style: Modify Game Layout min-height to 45rem * style: Modify volume input from vertical to horizontal - Change the volume input orientation from vertical to horizontal - Remove vertical-related styling and logic - Adjust layout for horizontal display * feat: Add loading state and message when game start button clicked * feat: Add roundLoss animation to RoundEndModal * refactor: Delete SHORTCUT_KEY because it's useless * refactor: Optimize timer management in useTimer hook - Simplify dependency array in useEffect to prevent unnecessary re-renders - Improve timer interval handling to avoid creating/clearing intervals on every render * fix: Add z-index to GameHeader for proper layering - Apply z-10 class to GameHeader component to ensure it appears above background elements - Resolve potential overlap issues with other page elements
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
제목: 🔄 전역 상태 변경에 따른 불필요한 리렌더링 최적화
📂 구현 기능
레이아웃 컴포넌트와 웹소켓 상태 변경 시 발생하는 불필요한 리렌더링을 포함하여, 애플리케이션 전반의 리렌더링 패턴을 분석하고 최적화합니다.
📝 상세 작업 내용
GameLayout컴포넌트의 리렌더링 패턴 분석React.memo와 메모이제이션 훅 적용🔆 참고 사항
⏰ 예상 작업 시간
총 6시간 소요 예상
The text was updated successfully, but these errors were encountered: