Media query hook not working on initial render.

[YairTavizon]

When importing the media queries states like here: https://orbit.kiwi/utilities/usemediaquery/ the "isLargeMobile" state initializes as "falsy" so when I try to use it in the template before the render it is always "falsy"

For example, trying to replicate this example from: https://orbit.kiwi/components/navigationbar/ the JUSTIFY ternary evaluation always returns falsy so the stack is aligned start always at the beginning even when the initial screen size is wider than a mobile

Expected Behavior

Work as a normal state so it can be used on initial render

Current Behavior

As mentioned above, is good to mention I'm using SSR with next, maybe that affects something.

Possible Solution

I created a simple custom hook to expose the state and make it usable in the html templates. Maybe we could figure something like this for the solution.

Steps to Reproduce

Simple example of using the state as a variable for templates
https://codesandbox.io/s/youthful-jennings-vycgm?file=/src/index.js&resolutionWidth=832&resolutionHeight=675

Context (Environment)

"react": "^17.0.2",
"next": "latest",
"@kiwicom/orbit-components": "^0.118.1",
"@kiwicom/orbit-design-tokens": "^0.13.9",

[mainframev]

@YairTavizon

Thanks for the proposal, we are aware of this issue.
It's an SSR issue and it has to be rendered twice I guess, in order to make it work with SSR. We will have to update the hook, so it will support SSR. On our product we use fresnel with SSR. Maybe this would help you.