perf: Optimize component with memoization and selective store subscriptions (#5296)

* ✨ (NodeOutputfield/index.tsx): Introduce memoization for IconComponent, Button components, and OutputComponent for performance optimization
🔧 (NodeOutputfield/index.tsx): Change the import of 'useEffect' to 'useCallback' for better performance and to prevent unnecessary re-renders
🔧 (NodeOutputfield/index.tsx): Refactor the 'NodeOutputField' component to use useMemo for selective store subscriptions and computed values to improve performance and avoid unnecessary recalculations
🔧 (NodeOutputfield/index.tsx): Refactor the 'handleUpdateOutputHide' function to use useCallback for better performance and to prevent unnecessary re-renders
🔧 (NodeOutputfield/index.tsx): Refactor the 'useEffect' hook to include dependencies and prevent unnecessary re-renders
🔧 (NodeOutputfield/index.tsx): Refactor the 'Handle' component to use useMemo for memoization and performance optimization

✨ (NodeOutputfield/index.tsx): Refactor NodeOutputField component to improve readability and maintainability by extracting button and tooltip components into separate reusable components, and optimizing the structure of the output field rendering.

📝 (RenderInputParameters/index.tsx): Move sortToolModeFields import to the top of the file for better organization and readability.

✨ (GenericNode/index.tsx): Introduce memoization to optimize rendering performance by memoizing components and values
🔧 (GenericNode/index.tsx): Add useCallback to handleUpdateCode and handleUpdateCodeWShortcut functions for better performance and prevent unnecessary re-renders

📝 (GenericNode/index.tsx): Refactor code to use useEffect and useCallback hooks for better performance and readability
📝 (GenericNode/index.tsx): Refactor code to improve component structure and readability by extracting repeated logic into separate functions using useCallback
📝 (GenericNode/index.tsx): Refactor code to optimize rendering logic and improve maintainability by using memoization with React.memo

✨ (sort-tool-mode-field.ts): introduce a new helper function sortToolModeFields to sort fields based on tool mode status and field order array

* 📝 (NodeOutputfield/index.tsx): add missing newline before ShadTooltip component for better code readability

✨ (handleRenderComponent/index.tsx): Add memoization to HandleContent component for performance optimization
♻️ (handleRenderComponent/index.tsx): Refactor HandleContent component to use useCallback and useMemo hooks for better code readability and maintainability

🔧 (handleRenderComponent/index.tsx): Refactor code to improve readability and maintainability by updating function signatures, using hooks more efficiently, and organizing code structure.

✨ (file.ts): refactor handleMouseDown function to use useCallback hook for better performance and memoization
♻️ (file.ts): refactor handleClick function to use useCallback hook for better performance and memoization

♻️ (handleRenderComponent/index.tsx): Refactor handleRenderComponent to improve code readability and maintainability by extracting callback functions into separate useCallback hooks and using memoization for validation function.

* improve memo in several components

* ✨ (handleRenderComponent/index.tsx): add data-testid attribute to handle element for improved testing and accessibility

* ✨ (toolbar-button.tsx): add data-testid prop to ToolbarButton component for better testing capabilities
📝 (index.tsx): add data-testid attribute to various ToolbarButton components for better testability

* ✨ (NodeOutputfield/index.tsx): Add onClick event handler to the InspectButton component to trigger a function when the button is clicked.

* ✅ (freeze.spec.ts): add test case for clicking on "Close" button in the modal to ensure proper functionality

* 📝 (nodeToolbarComponent/index.tsx): remove unnecessary dataTestId attribute from freeze-path-button to clean up code and improve readability

* 🐛 (GenericNode/index.tsx): Fix potential error when outputs is null or undefined by adding optional chaining
🐛 (auto-save-off.spec.ts): Update selector for "Saved" text to target the last occurrence
🐛 (auto-save-off.spec.ts): Update selector for "Unsaved changes will be permanently lost." text to handle dynamic rendering
🐛 (auto-save-off.spec.ts): Update selector for "NVIDIA" text to ensure it is not visible
🐛 (auto-save-off.spec.ts): Update drag and drop logic for NVIDIA model to ensure correct behavior
🐛 (auto-save-off.spec.ts): Update hover logic and add component button handling for NVIDIA model to ensure correct behavior

* ✨ (parameterRenderComponent/index.tsx): Refactor ParameterRenderComponent to improve performance by memoizing components and props, and using useCallback and useMemo for better optimization.

📝 (ui/disclosure.tsx): Update imports and add new React hooks for better code organization and performance
📝 (ui/disclosure.tsx): Refactor DisclosureProvider component to use useCallback and useMemo for better performance
📝 (ui/disclosure.tsx): Refactor DisclosureTrigger component to use useCallback and useMemo for better performance
📝 (ui/disclosure.tsx): Refactor DisclosureContent component to use useCallback and useMemo for better performance
📝 (ui/disclosure.tsx): Refactor Disclosure component to use memo for better performance
📝 (ui/disclosure.tsx): Refactor DisclosureTrigger component to use memo for better performance
📝 (ui/disclosure.tsx): Refactor DisclosureContent component to use memo for better performance
📝 (ui/disclosure.tsx): Refactor DisclosureProvider component to use memo for better performance
📝 (nodeToolbarComponent/index.tsx): Refactor NodeToolbarComponent to use useCallback and useMemo for better performance

* ✨ (use-handle-new-value.tsx): Memoize postTemplateValue and updateNodeState functions to prevent unnecessary re-renders and improve performance
📝 (use-handle-new-value.tsx): Memoize handleOnNewValue function to optimize performance by preventing unnecessary re-renders and improve code readability

---------

Co-authored-by: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com>
This commit is contained in:
Cristhian Zanforlin Lousa 2024-12-17 11:05:13 -03:00 • committed by GitHub
commit 2a95b52e06
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
23 changed files with 2799 additions and 1992 deletions

View file

@ -226,6 +226,8 @@ test(
.getByPlaceholder("Empty")
.textContent();
await page.getByText("Close").last().click();
await page.getByTestId("btn-close-modal").click();
await page.getByTestId("textarea_str_input_value").first().fill(",");