refactor: Optimize performance with comprehensive component optimization and modular architecture #194
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- 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
โฆmize 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
- 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
โฆpport - 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
- 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
โฆality - 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
- 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
โฆs dependency array and interval management
โฆary 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.
- 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
- Change the volume input orientation from vertical to horizontal - Remove vertical-related styling and logic - Adjust layout for horizontal display
rhino-ty
added
โจ Feature
5 tasks
ssum1ra
approved these changes
Dec 4, 2024
|
๐ Storybook preview deployed to: Visit Storybook Preview |
- Simplify dependency array in useEffect to prevent unnecessary re-renders - Improve timer interval handling to avoid creating/clearing intervals on every render
- Apply z-10 class to GameHeader component to ensure it appears above background elements - Resolve potential overlap issues with other page elements
|
๐ Storybook preview deployed to: Visit Storybook Preview |
choiseona
approved these changes
Dec 4, 2024
|
๐งน Storybook preview for PR #194 has been removed. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
๐ ์์ ๋ด์ฉ
closes #164
๐ก ์์ธํ ์ค๋ช
1. ์ฑ๋ฅ ์ต์ ํ
Zustand ์คํ ์ด ์ ๊ทผ ๋ฐฉ์ ๊ฐ์
selector์ฌ์ฉ์ผ๋ก ๋ถํ์ํ ๋ฆฌ๋ ๋๋ง ๋ฐฉ์งPlayerCardList,Chat,Setting๋ฑ ์ฃผ์ ์ปดํฌ๋ํธ ์ต์ ํ์ปดํฌ๋ํธ ๋ชจ๋ํ
Chat์ปดํฌ๋ํธ๋ฅผChatContainer,ChatList,ChatInput,ChatBubble๋ก ๋ถ๋ฆฌmemo์ ์ฉ์ผ๋ก ๋ฆฌ๋ ๋๋ง ์ต์ํSetting์ปดํฌ๋ํธ์ ๊ด์ฌ์ฌ ๋ถ๋ฆฌ ๋ฐ ๊ตฌ์กฐ ๊ฐ์2. ๋จ์ถํค ์์คํ ๊ฐ์
SHORTCUT_KEYSํ์ฅuseShortcuts ์ปค์คํ ํ ๊ตฌํ
input์์์์ ์๋ ๋นํ์ฑํ3. ํ์ด๋จธ ๋ก์ง ๊ฐ์
Timer์คํ ์ด ๊ตฌํgameSocket.store์์ ๋ถ๋ฆฌ4. ๊ทธ ์ธ
์น์ฑ ๊ด๋ จ ์ค์ ์์
mobile-web-app-capable๋ฉํ ํ๊ทธ ์์ ์ผ๋ก ๋ชจ๋ฐ์ผ ์น์ฑ ํ๊ฒฝ ๊ฐ์UI/UX ๊ฐ์
45rem์ผ๋ก ์กฐ์ ์ฝ๋ ์ ๋ฆฌ
useDrawingSocket,createSocket์ ๋ถํ์ํconsole.log ์ ๊ฑฐ@tanstack/react-queryํจํค์ง ์ ๊ฑฐ๐ ์ฐธ๊ณ ์๋ฃ & ๊ตฌํ ๊ฒฐ๊ณผ
SHORTCUT_KEYS์์ ์ฐธ๊ณ๐ข ๋ฆฌ๋ทฐ ์๊ตฌ ์ฌํญ
โ ์ ํ ์ฒดํฌ๋ฆฌ์คํธ
main์ด ์๋๋๋ค.)