fix(lint): fix react-hooks lint errors

[Sim-sat]

Description

Fixes all react-hooks/exhaustive-deps and react-hooks/immutability errors from eslint. These come from missing dependencies in useEffects or useCallbacks. This improves performance by preventing rerenders.

Related Issue

PR type [ ] Issue [x] New Feature [ ] Documentation
Linked Issue: #795

Checklist

Please check all that apply:

• [MANDATORY for new feature] Alignment: I have raised a GitHub issue and it was reviewed/approved by maintainers
• Tests: I have included automated tests for my changes.
• [MANDATORY for UI changes] Screenshots: I have attached "Before" vs "After" screenshots below.
• [MANDATORY for Frontend changes] Quality: I have run pnpm run validate (especially for Frontend).
• Translations: I have only updated the English (en) translation file (if applicable).
• Architecture: My code follows the existing architecture standards.
• Database Security: I have updated rls_policies.sql for any new user-specific tables.
• [MANDATORY - ALL] Integrity & License: I certify this is my own work, free of malicious code(phishing, malware, etc.) and I agree to the License terms.

[gemini-code-assist]

Summary of Changes

Hello, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request focuses on enhancing the stability and performance of the frontend by resolving various React Hook linting issues. The changes ensure that components correctly manage their dependencies, preventing potential bugs related to stale closures and optimizing rendering cycles. This systematic cleanup contributes to a more robust and efficient application.

Highlights

• React Hooks Linting Fixes: Addressed numerous react-hooks/exhaustive-deps and react-hooks/immutability ESLint errors across the codebase to ensure correct dependency arrays for useEffect, useCallback, and useMemo hooks.
• Performance Improvements: Refactored useState initializations to use functional updaters and wrapped several functions in useCallback or useMemo to prevent unnecessary re-renders and improve component performance.
• Dependency Array Refinements: Updated useEffect and useCallback dependency arrays to explicitly include all necessary values, removing eslint-disable-next-line comments and ensuring React's linting rules are properly followed.

Changelog

• SparkyFitnessFrontend/src/components/DraggableChatbotButton.tsx
  • Refactored buttonState initialization to use a functional updater, moving localStorage logic into useState.
  • Removed unused loading variable from useAuth hook destructuring.
  • Wrapped handleInteractionEnd and handleClick in useCallback with appropriate dependencies.
  • Updated handleMouseUp and onTouchEnd dependencies for useCallback.
• SparkyFitnessFrontend/src/components/FoodSearch/BarcodeScanner.tsx
  • Updated useEffect dependency array for getCameras to include selectedCameraId.
• SparkyFitnessFrontend/src/components/FoodSearch/CustomFoodForm.tsx
  • Imported useCallback for functional components.
  • Wrapped loadExistingVariants in useCallback and updated its dependencies.
  • Adjusted the main useEffect for form initialization to depend on loadExistingVariants.
• SparkyFitnessFrontend/src/components/FoodUnitSelector.tsx
  • Wrapped loadVariantsData in useCallback and updated its dependencies.
  • Updated the main useEffect for data loading to include loadVariantsData and setQuantity in its dependency array.
• SparkyFitnessFrontend/src/components/MealBuilder.tsx
  • Updated useEffect dependency array to include initialServingSize, initialServingUnit, and queryClient.
• SparkyFitnessFrontend/src/components/MealPercentageManager.tsx
  • Replaced useEffect with useMemo for selectedTemplateName calculation.
  • Refactored logic for syncing initialPercentages to use useState with a prevInitial comparison.
  • Wrapped normalizePercentages and autoBalance functions in useCallback with correct dependencies.
  • Updated handleSliderChange dependencies to include autoBalance and onPercentagesChange.
  • Removed the standalone autoBalance function, integrating its logic into a useCallback.
• SparkyFitnessFrontend/src/contexts/PreferencesContext.tsx
  • Updated useEffect dependency array for initial logging to include loggingLevel.
• SparkyFitnessFrontend/src/pages/Auth/Auth.tsx
  • Imported useCallback for functional components.
  • Updated useEffect dependency array for fetchAuthSettings to include initiateOidcLogin.
  • Wrapped triggerMfaChallenge in useCallback with loggingLevel and queryClient as dependencies.
  • Updated useEffect dependency array for magic link login to include triggerMfaChallenge and verifyMagicLink.
• SparkyFitnessFrontend/src/pages/Diary/EditExerciseEntryDialog.tsx
  • Updated useEffect dependency array to include setCaloriesBurnedInput, setShowCaloriesWarning, entry.calories_burned, and loggingLevel.
• SparkyFitnessFrontend/src/pages/Diary/ExercisePlaybackModal.tsx
  • Imported useMemo for performance optimization.
  • Converted prevExerciseIdRef to prevExerciseId state and added prevIsOpen state.
  • Wrapped instructions in useMemo to prevent unnecessary re-calculations.
  • Refactored playback control logic, moving state resets and initial playback triggers outside useEffect for clearer state management.
  • Simplified useEffect for side effects related to modal open/close and exercise changes.
  • Updated handlePrevious dependencies for useCallback.
• SparkyFitnessFrontend/src/pages/Exercises/AddWorkoutPlanDialog.tsx
  • Updated handleUpdateSetInPlan dependencies to remove convertWeight and add setAssignments.
• SparkyFitnessFrontend/src/pages/Exercises/ExerciseSearch.tsx
  • Wrapped handleSearch in useCallback with an extensive list of dependencies to ensure correctness.
  • Updated useEffect for initial search to depend on handleSearch.
  • Updated useEffect for debounced search to depend on handleSearch.
• SparkyFitnessFrontend/src/pages/Foods/MealPlanTemplateForm.tsx
  • Imported useCallback for functional components.
  • Wrapped fetchNutritionForAssignment in useCallback with loggingLevel and queryClient as dependencies.
  • Updated useEffect for loading nutrition data to include setExtendedAssignments, fetchNutritionForAssignment, and template.assignments in its dependency array.
• SparkyFitnessFrontend/src/pages/Integrations/WithingsCallback.tsx
  • Updated useEffect dependency array to include setMessage and toast.
• SparkyFitnessFrontend/src/pages/Reports/ActivityReportLapTable.tsx
  • Imported useMemo for performance optimization.
  • Refactored processedLaps calculation into a useMemo hook to ensure immutability and correct dependency tracking.
• SparkyFitnessFrontend/src/pages/Settings/NutrientDisplaySettings.tsx
  • Imported useCallback for functional components.
  • Wrapped savePreferences in useCallback with correct dependencies.
  • Updated useEffect for debounced saving to depend on savePreferences.

Activity

• The pull request addresses an existing issue, as indicated by 'Linked Issue: Eslint errors in Frontend #795'.
• The author has marked the PR as a 'New Feature', which might refer to the overall goal of improved performance or a related feature in the linked issue.
• The author has run pnpm run validate and confirmed adherence to architecture standards and integrity, as per the checklist.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request effectively resolves numerous react-hooks/exhaustive-deps and react-hooks/immutability linting errors across the application. The changes primarily involve wrapping functions in useCallback, memoizing derived values with useMemo, and adding missing dependencies to hooks. A notable improvement is the refactoring in ActivityReportLapTable.tsx to use a pure function for data processing, which correctly handles immutability.

I've added a couple of suggestions regarding the pattern used for synchronizing props with internal component state. While the current implementation works, using a more conventional useEffect or a key prop could enhance predictability and maintainability.