Fix useEffect is getting called on every re-render

[kprakhar]

Issue: On every re-render useEffect is getting called. It's not the same behaviour as we had without the custom hook.

Ref: https://react.dev/reference/react/useEffect#connecting-to-an-external-system -> Listening to global browser event.

Fix: As we're passing a new function reference every-time to the custom hook (listener argument), useEffect dependency array is getting changed and it's running on per render. one solution is to wrap the listener in App.js with useCallback.

https://github.com/reactjs/react.dev/assets/46070267/188d2dc4-85f1-430e-b4df-836204ce3e89

[github-actions[bot]]

Size changes

📦 Next.js Bundle Analysis for react-dev

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌