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

### Is there an existing issue for this?

- [x] 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

- [x] I agree to follow this project's Code of Conduct