Skip to content
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
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

maskoff7
Copy link

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.

…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.
@nicarq
Copy link
Contributor

nicarq commented Sep 13, 2024

@maskoff7 thank you for the PR! 🙏 the team will review it soon

@paulclindo
Copy link
Collaborator

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
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants