Is there an existing issue for this?
What happened?
Description
The frontend currently has several React hooks and performance-related issues that may lead to bugs, unnecessary re-renders, and full application crashes. These issues mainly stem from disabled hook dependency checks, missing error boundaries, and lack of memoization on expensive components.
Proposed changes:
-Enable react-hooks/exhaustive-deps ESLint rule (initially as warn)
-Fix missing or incorrect dependency arrays in hooks
-Add React Error Boundaries at app and/or route level
-Memoize expensive and frequently rendered components using React.memo
-Use useCallback where function props cause unnecessary re-renders
Benefits:
-Reduced risk of stale closures and hidden bugs
-Prevents full app crashes by handling runtime errors gracefully
-Improved rendering performance, especially for large media lists
-Better user experience and easier debugging
Additional context:
Several media-related components (e.g. image galleries and thumbnails) re-render excessively and the app currently crashes on uncaught render errors. Addressing these issues will significantly improve stability and performance across the frontend.
Record
Is there an existing issue for this?
What happened?
Description
The frontend currently has several React hooks and performance-related issues that may lead to bugs, unnecessary re-renders, and full application crashes. These issues mainly stem from disabled hook dependency checks, missing error boundaries, and lack of memoization on expensive components.
Proposed changes:
-Enable react-hooks/exhaustive-deps ESLint rule (initially as warn)
-Fix missing or incorrect dependency arrays in hooks
-Add React Error Boundaries at app and/or route level
-Memoize expensive and frequently rendered components using React.memo
-Use useCallback where function props cause unnecessary re-renders
Benefits:
-Reduced risk of stale closures and hidden bugs
-Prevents full app crashes by handling runtime errors gracefully
-Improved rendering performance, especially for large media lists
-Better user experience and easier debugging
Additional context:
Several media-related components (e.g. image galleries and thumbnails) re-render excessively and the app currently crashes on uncaught render errors. Addressing these issues will significantly improve stability and performance across the frontend.
Record