Skip to content
This repository has been archived by the owner on Sep 7, 2024. It is now read-only.

Remove the scrollbar from the subscriber section #823

Closed
wants to merge 1 commit into from
Closed

Remove the scrollbar from the subscriber section #823

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 19 additions & 9 deletions src/components/layout/JoinUs/NewsLetter.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,25 @@ const NewsLetter = () => {
const [iframeHeight, setIframeHeight] = useState(670);

useEffect(() => {
const windowWidth = window.innerWidth;

if (windowWidth < 900) {
setIframeHeight(830);
} else if (windowWidth < 1250) {
setIframeHeight(700);
} else {
setIframeHeight(670);
}
const updateIframeHeight = () => {
const windowWidth = window.innerWidth;

if (windowWidth < 900) {
setIframeHeight(830);
} else if (windowWidth < 1250) {
setIframeHeight(700);
} else {
setIframeHeight(670);
}
};

updateIframeHeight();

window.addEventListener('resize', updateIframeHeight);

return () => {
window.removeEventListener('resize', updateIframeHeight);
};
Comment on lines +7 to +25
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The new hunk introduces an event listener for the resize event to dynamically adjust the iframe height based on the window width. This is a good approach to enhance the responsiveness of the component. The cleanup function to remove the event listener when the component is unmounted is also correctly implemented, which is crucial to prevent potential memory leaks. However, there is a potential performance issue here. The resize event can fire many times per second during a "resize" operation, leading to high processing overhead if the event handler does much work. In this case, the event handler updateIframeHeight calls setIframeHeight which triggers a re-render of the component. To mitigate this, consider debouncing the updateIframeHeight function to limit the rate at which it's invoked.

+ import { debounce } from 'lodash';

  useEffect(() => {
    const updateIframeHeight = debounce(() => {
      const windowWidth = window.innerWidth;

      if (windowWidth < 900) {
        setIframeHeight(830);
      } else if (windowWidth < 1250) {
        setIframeHeight(700);
      } else {
        setIframeHeight(670);
      }
    }, 250); // Debounce time in milliseconds

    updateIframeHeight();

    window.addEventListener('resize', updateIframeHeight);

    return () => {
      window.removeEventListener('resize', updateIframeHeight);
    };
  }, []);
Committable suggestion (Beta)
Suggested change
const updateIframeHeight = () => {
const windowWidth = window.innerWidth;
if (windowWidth < 900) {
setIframeHeight(830);
} else if (windowWidth < 1250) {
setIframeHeight(700);
} else {
setIframeHeight(670);
}
};
updateIframeHeight();
window.addEventListener('resize', updateIframeHeight);
return () => {
window.removeEventListener('resize', updateIframeHeight);
};
import { debounce } from 'lodash';
const NewsLetter = () => {
const [iframeHeight, setIframeHeight] = useState(670);
useEffect(() => {
const updateIframeHeight = debounce(() => {
const windowWidth = window.innerWidth;
if (windowWidth < 900) {
setIframeHeight(830);
} else if (windowWidth < 1250) {
setIframeHeight(700);
} else {
setIframeHeight(670);
}
}, 250); // Debounce time in milliseconds
updateIframeHeight();
window.addEventListener('resize', updateIframeHeight);
return () => {
window.removeEventListener('resize', updateIframeHeight);
};
}, []);
return (
// Rest of the component
);
};
export default NewsLetter;

}, []);

return (
Expand Down