🐛 Next.js: Responsive props are not working properly

[alexasselin008]

Describe the bug

When using Orbit in a Next.js App, using a responsive prop throws a warning

Steps to reproduce

import { Flex } from "@sharegate/orbit-ui";

export function MyView() {
    return (
        <Flex minHeight="100vh" marginTop={13} backgroundColor={{ base:"blue", sm:"red" }}>

        </Flex>
    );
}

Open console, and observe the following error :

next-dev.js?3515:25 Warning: Prop `style` did not match. Server: "min-height:100vh;margin-top:var(--o-ui-sp-13);background-color:blue;display:flex;flex-direction:row" Client: "min-height:100vh;margin-top:var(--o-ui-sp-13);background-color:red;display:flex;flex-direction:row"

Visual result:
The property background color is blue, but it should be red.

Expected results

No warning and a red background

[patricklafrance]

What does other DS do to fix this? Does react-spectrum have a solution? I guess any DS supporting SSR and responsive props have the same issue.

[tjosepo]

I think the solution is to use useSyncExternalStore.

It's meant to handle external states (such as browser APIs) and server rendering. It lets you set a specific state for hydration.

I believe this might work.

Then again, do we want to set a state for hydration if we don't know ahead of time what it'll look like on the user's device?

export function BreakpointProvider({
    children,
    unsupportedMatchMediaBreakpoint = "lg"
}: BreakpointProvider) {

    // Listen to the "resize" event
    const subscribe = useCallback((subscriber) => {
       document.addEventListener("resize", subscriber);
       return () => document.removeEventListener("resize", subscriber);
    }, []);
    
    // Get the breakpoint on resize
    const getSnapshot = useCallback(() => {
         const matched: Breakpoint[] = [];

        for (const [key, value] of ReversedBreakpoints) {
           if (window.matchMedia(value).matches) {
                matched.push(key);
           }
        }

        return JSON.stringify(matched);
    }, []);

    // Get the default breakpoint, which will be used by the server and during hydration
    const getServerSnapshot = useCallback(() => {
        return JSON.stringify([unsupportedMatchMediaBreakpoint])
    }, [unsupportedMatchMediaBreakpoint]);

    // We return a JSON value because React does a shallow comparison with the result of `getSnapshot`
    // to know if it needs to rerender the component after `onresize` event is fired.
    const matchedBreakpointsJson = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
    const matchedBreakpoints = JSON.parse(matchedBreakpointsJson);

    return (
        <BreakpointContext.Provider value={{ matchedBreakpoints }}>
            {children}
        </BreakpointContext.Provider>
    );
}