fix(pages): add missing useEffect dependency arrays for Escape key handlers

[saksham-1304]

Fix #726

Description

This PR fixes a performance bug where useEffect hooks for Escape key handlers were missing dependency arrays, causing event listeners to be re-registered on every render.

The Problem

In both NewsDetailPage.tsx and More.tsx, the Escape key handler useEffect hooks lacked dependency arrays:

// Before - runs on EVERY render
useEffect(() => {
  const handleEscKey = (e: KeyboardEvent) => {
    if (e.key === 'Escape' && modalImage) {
      closeImageModal();
    }
  };
  window.addEventListener('keydown', handleEscKey);
  return () => window.removeEventListener('keydown', handleEscKey);
}); // ⚠️ No dependency array!

This causes:

• Event listeners being added/removed on every render
• Unnecessary performance overhead
• Potential memory issues on slower devices

The Fix

Added proper dependency arrays to both useEffect hooks:

NewsDetailPage.tsx:

• Moved closeImageModal callback declaration before the useEffect that uses it
• Added [modalImage, closeImageModal] dependency array

More.tsx:

• Added [modalImage] dependency array

// After - runs only when modalImage changes
useEffect(() => {
  // ... handler code
}, [modalImage, closeImageModal]); // ✅ Proper dependencies

Testing

• npm run lint passes
• No TypeScript errors in modified files
• Code formatted with Prettier

Checklist

• I have read and followed the project's Code of Conduct
• I have searched for similar issues/PRs before creating this one
• I have tested my changes locally
• I have followed conventional commit messages specification
• My changes address only one concept per commit

---

[github-actions]

🎉 All Checks Passed!

Status: ✅ Ready to merge

✅ Completed Workflows

Workflow	Status	Details
🔨 Continuous Integration	✅ Passed	Build completed successfully
📝 Code Linting	✅ Passed	All formatting and style checks passed

---

🚀 This PR is ready for review and can be safely merged to main branch!

Great work! Your code meets all quality standards. 👏

[Copilot]

Pull request overview

This PR addresses a performance issue by adding missing dependency arrays to useEffect hooks that handle Escape key events for closing image modals. The fix prevents unnecessary re-registration of event listeners on every render.

Key Changes:

• Added dependency arrays to Escape key handler useEffect hooks in both files
• Refactored NewsDetailPage.tsx to move closeImageModal declaration before its usage in useEffect
• Applied useCallback wrapper to closeImageModal in NewsDetailPage.tsx

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
src/pages/News/NewsDetailPage.tsx	Moved closeImageModal callback before the useEffect and added [modalImage, closeImageModal] dependency array to the Escape key handler
src/pages/More.tsx	Added [modalImage] dependency array to the Escape key handler useEffect

Comments suppressed due to low confidence (1)

src/pages/More.tsx:114

• Inconsistent implementation pattern between files. In NewsDetailPage.tsx, closeImageModal is wrapped with useCallback and included in the dependency array, but here it's a regular function and omitted from dependencies.

For consistency and to follow React best practices, consider applying the same pattern as NewsDetailPage.tsx: wrap closeImageModal with useCallback and include it in the dependency array.

  const closeImageModal = () => {
    setModalImage(null);
    document.body.classList.remove('overflow-hidden');
  };

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[github-actions]

🎉 All Checks Passed!

Status: ✅ Ready to merge

✅ Completed Workflows

Workflow	Status	Details
🔨 Continuous Integration	✅ Passed	Build completed successfully
📝 Code Linting	✅ Passed	All formatting and style checks passed

---

🚀 This PR is ready for review and can be safely merged to main branch!

Great work! Your code meets all quality standards. 👏