useBreakpointIndex causes flickering #2159
Description
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