useBreakpointIndex causes flickering

[MuhammadJamaluddin]

Describe the bug
When useResponsiveValue is called twice once in the skeleton screen & another time in the actual screen, it causes a flicker

Why this is happening?
cause we initially have const [value, setValue] = useState(defaultIndex); where defaultIndex is 0 & then setValue is triggered after the component renders resulting in this flicker effect... using useLayoutEffect mitigates this issue

Another potential solution (I personally prefer this one) is to remove defaultOptions & use window.matchMedia to define the initial state instead of hardcoding 0 which seems problematic

To Reproduce
call useResponsiveValue twice 🤷‍♂️ ... once in a skeleton screen & another tine in the actual screen

Expected behavior
It doesn't flicker

Screenshots
with useEffect

Screen.Recording.2022-03-03.at.3.32.37.PM.mov

with useLayoutEffect

Screen.Recording.2022-03-03.at.3.34.58.PM.mov