🩹 chore: 콜백 함수 메모이제이션 적용하여 불필요한 리렌더링 방지

Author: suhyeoonn

src/hooks/useOnlineStatus.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { Fn } from '../types';
 import { hasNavigator } from '../utils';
 
@@ -33,6 +33,9 @@ const useOnlineStatus = ({
     hasNavigator() ? navigator.onLine : false
   );
 
+  const memoizedOnline = useCallback(onlineCallback, [onlineCallback]);
+  const memorizedOffline = useCallback(offlineCallback, [offlineCallback]);
+
   useEffect(() => {
     if (!hasNavigator()) {
       console.error('navigator is not supported in this environment.');
@@ -41,12 +44,12 @@ const useOnlineStatus = ({
 
     const handleOnline = () => {
       setIsOnline(true);
-      onlineCallback();
+      memoizedOnline();
     };
 
     const handleOffline = () => {
       setIsOnline(false);
-      offlineCallback();
+      memorizedOffline();
     };
 
     window.addEventListener('online', handleOnline);
@@ -56,7 +59,7 @@ const useOnlineStatus = ({
       window.removeEventListener('online', handleOnline);
       window.removeEventListener('offline', handleOffline);
     };
-  }, [onlineCallback, offlineCallback]);
+  }, [memoizedOnline, memorizedOffline]);
 
   return {
     isOnline,