fix: react state loop from hooks useMediaQuery (#6031)

* fix: react state loop from hooks useMediaQuerry

* chore: update test cases hooks media query

Author: urmauur

web-app/src/hooks/__tests__/useMediaQuery.test.ts

@@ -266,14 +266,7 @@ describe('useSmallScreenStore', () => {
 })
 
 describe('useSmallScreen', () => {
-  beforeEach(() => {
-    // Reset the store state before each test
-    act(() => {
-      useSmallScreenStore.getState().setIsSmallScreen(false)
-    })
-  })
-
-  it('should return small screen state and update store', () => {
+  it('should return small screen state', () => {
     const mockMediaQueryList = {
       matches: true,
       addEventListener: vi.fn(),
@@ -285,7 +278,6 @@ describe('useSmallScreen', () => {
     const { result } = renderHook(() => useSmallScreen())
 
     expect(result.current).toBe(true)
-    expect(useSmallScreenStore.getState().isSmallScreen).toBe(true)
   })
 
   it('should update when media query changes', () => {
@@ -309,7 +301,6 @@ describe('useSmallScreen', () => {
     })
 
     expect(result.current).toBe(true)
-    expect(useSmallScreenStore.getState().isSmallScreen).toBe(true)
   })
 
   it('should use correct media query for small screen detection', () => {
@@ -325,20 +316,4 @@ describe('useSmallScreen', () => {
 
     expect(mockMatchMedia).toHaveBeenCalledWith('(max-width: 768px)')
   })
-
-  it('should persist state across multiple hook instances', () => {
-    const mockMediaQueryList = {
-      matches: true,
-      addEventListener: vi.fn(),
-      removeEventListener: vi.fn(),
-    }
-
-    mockMatchMedia.mockReturnValue(mockMediaQueryList)
-
-    const { result: result1 } = renderHook(() => useSmallScreen())
-    const { result: result2 } = renderHook(() => useSmallScreen())
-
-    expect(result1.current).toBe(true)
-    expect(result2.current).toBe(true)
-  })
 })

web-app/src/hooks/useMediaQuery.ts

@@ -77,14 +77,7 @@ export function useMediaQuery(
   return matches || false
 }
 
-// Specific hook for small screen detection with state management
+// Specific hook for small screen detection
 export const useSmallScreen = (): boolean => {
-  const { isSmallScreen, setIsSmallScreen } = useSmallScreenStore()
-  const mediaQuery = useMediaQuery('(max-width: 768px)')
-
-  useEffect(() => {
-    setIsSmallScreen(mediaQuery)
-  }, [mediaQuery, setIsSmallScreen])
-
-  return isSmallScreen
+  return useMediaQuery('(max-width: 768px)')
 }