feat(Channel): Refactor ChannelCarousel to use useNativeEventListener…

… for window resize
thematters · Jan 3, 2025 · 8c9868e · 8c9868e
1 parent 015c0cd
commit 8c9868e
Showing 1 changed file with 4 additions and 2 deletions.
diff --git a/src/views/Home/Channel/Page/Carousel/index.tsx b/src/views/Home/Channel/Page/Carousel/index.tsx
@@ -8,6 +8,8 @@ import {
   useState,
 } from 'react'
 
+import { useNativeEventListener } from '~/components'
+
 // import { useCarousel } from '~/components/Hook/useCarousel'
 import Dot from './Dot'
 import styles from './styles.module.css'
@@ -167,7 +169,7 @@ const ChannelCarousel = () => {
 
   const [columnCount, setColumnCount] = useState<ColumnCount>('4')
 
-  useEffect(() => {
+  useNativeEventListener('resize', () => {
     if (typeof window !== 'undefined') {
       if (window.innerWidth >= 453) {
         setColumnCount('5')
@@ -179,7 +181,7 @@ const ChannelCarousel = () => {
         setColumnCount('7')
       }
     }
-  }, [])
+  })
 
   const pageCount = Math.ceil(items.length / (Number(columnCount) * 2))
   let slicedItems = []