BUG:React Hooks & Performance Improvements (Hooks deps, Error Boundaries, memoization)

[kunal-bunkar]

Is there an existing issue for this?

• I have searched the existing issues

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

• I agree to follow this project's Code of Conduct

[github-actions]

👋 Thanks for opening this issue! The maintainers will review it shortly. Till then, do not open any PR. This is a strict rule we like to follow around here :)

[kunal-bunkar]

hello @rahulharpal1603 sir could you please assign this to me, i want to work on this issue

[aryash45]

hello @rahulharpal1603 i would like to work on this issue please assign me