-
Notifications
You must be signed in to change notification settings - Fork 16
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Optimize React components and hooks for better performance #430
Open
maskoff7
wants to merge
1
commit into
dcSpark:main
Choose a base branch
from
maskoff7:main
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
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
…ersation: Memoize isLoadingMessage calculation and onSubmit function - OllamaModelsRepository: Memoize columns array and handleSortingChange function - ChatLayout: Memoize refetchInterval, activesInboxes, and archivesInboxes - useWebSocketMessage: Optimize useEffect dependencies and memoize wsMessage - SheetProject: Memoize table object and optimize WebSocket useEffect dependencies These changes aim to reduce unnecessary re-renders and calculations, potentially improving the overall performance of the application. This commit focuses on improving the performance of several key components and hooks in our application by implementing React optimization techniques. ChatConversation: - Memoized the isLoadingMessage calculation using useMemo to prevent unnecessary recalculations on re-renders. - Wrapped the onSubmit function with useCallback to ensure it's not recreated on every render, potentially reducing unnecessary re-renders of child components. - Optimized the useEffect for setting firstMessageWorkflow by using a more specific dependency array. OllamaModelsRepository: - Memoized the columns array using useMemo to prevent recreation on each render. - Implemented useCallback for the handleSortingChange function to optimize performance when passed as a prop to child components. - Split the useEffect for installedOllamaModelsMap and selectedTagMap setup into separate effects for better separation of concerns. ChatLayout: - Memoized the refetchInterval function using useCallback to prevent unnecessary recreations. - Implemented useMemo for activesInboxes and archivesInboxes calculations to optimize performance, especially beneficial if the inboxes array is large. useWebSocketMessage: - Optimized the useEffect dependencies by only including necessary parts of the auth object, reducing unnecessary effect runs. - Memoized the WebSocket message creation using useMemo to prevent unnecessary recalculations. SheetProject: - Memoized the table object using useMemo to prevent unnecessary recreation on each render, potentially improving performance in data-heavy scenarios. - Optimized the WebSocket useEffect dependencies by only including necessary parts of the auth object. These optimizations aim to reduce unnecessary re-renders, calculations, and effect runs throughout the application. By implementing these React best practices, we expect to see improved performance, especially in scenarios with large datasets or frequent updates.This commit focuses on improving the performance of several key components and hooks in our application by implementing React optimization techniques. ChatConversation: - Memoized the isLoadingMessage calculation using useMemo to prevent unnecessary recalculations on re-renders. - Wrapped the onSubmit function with useCallback to ensure it's not recreated on every render, potentially reducing unnecessary re-renders of child components. - Optimized the useEffect for setting firstMessageWorkflow by using a more specific dependency array. OllamaModelsRepository: - Memoized the columns array using useMemo to prevent recreation on each render. - Implemented useCallback for the handleSortingChange function to optimize performance when passed as a prop to child components. - Split the useEffect for installedOllamaModelsMap and selectedTagMap setup into separate effects for better separation of concerns. ChatLayout: - Memoized the refetchInterval function using useCallback to prevent unnecessary recreations. - Implemented useMemo for activesInboxes and archivesInboxes calculations to optimize performance, especially beneficial if the inboxes array is large. useWebSocketMessage: - Optimized the useEffect dependencies by only including necessary parts of the auth object, reducing unnecessary effect runs. - Memoized the WebSocket message creation using useMemo to prevent unnecessary recalculations. SheetProject: - Memoized the table object using useMemo to prevent unnecessary recreation on each render, potentially improving performance in data-heavy scenarios. - Optimized the WebSocket useEffect dependencies by only including necessary parts of the auth object. These optimizations aim to reduce unnecessary re-renders, calculations, and effect runs throughout the application. By implementing these React best practices, we expect to see improved performance, especially in scenarios with large datasets or frequent updates.
@maskoff7 thank you for the PR! 🙏 the team will review it soon |
Thanks @maskoff7, looks good! We've recently made some performance improvements in the chat conversation feature, could you please rebase your branch with the latest changes? |
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.
This commit focuses on improving the performance of several key components and hooks in our application by implementing React optimization techniques.
ChatConversation:
OllamaModelsRepository:
ChatLayout:
useWebSocketMessage:
SheetProject:
These optimizations aim to reduce unnecessary re-renders, calculations, and effect runs throughout the application. By implementing these React best practices, we expect to see improved performance, especially in scenarios with large datasets or frequent updates.