fix: set default breakpoint without computing

[kamleshchandnani]

This was a nasty bug and can be discovered when we do SSR and open the application on mobile device. There was a class mismatch between server and client leading to mismatch in DOM trees between server and client

const [breakpointAndDevice, setBreakpointAndDevice] = useState(() => {
    const matchedBreakpoint = getMatchedBreakpoint();
    const matchedDeviceType = getMatchedDeviceType(matchedBreakpoint);
    return {
      matchedBreakpoint,
      matchedDeviceType,
    };
  });

The above code will compute matchedBreakpoint: undefined and matchedDeviceType: 'desktop' when run on server and now since the useState is a function it gets evaluated again on the client side and now if the client side is being opened on mobile device the useState will return matchedBreakpoint: s and matchedDeviceType: 'mobile' so the initial render if it had anything that changes because the screensize eg: typography the DOM tree will be different between server and client

[changeset-bot]

🦋 Changeset detected

Latest commit: 6620ba5

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@razorpay/blade	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

✅ PR title follows Conventional Commits specification.

[bundlemon]

BundleMon

Files updated (2)

Status	Path	Size	Limits
✅	Web Utils build/utils/index.production.web.js	3.38KB (+89B +2.64%)	-
✅	Web Components build/components/index.production.web.js	265.28KB (+76B +0.03%)	-

Unchanged files (12)

Status	Path	Size	Limits
✅	React Native Components build/components/index.native.js	186.63KB	-
✅	Web Tokens build/tokens/index.production.web.js	42.24KB	-
✅	React Native Tokens build/tokens/index.native.js	38.35KB	-
✅	CSS Theme Tokens build/css/paymentThemeDarkDesktop.css	4.55KB	-
✅	CSS Theme Tokens build/css/paymentThemeDarkMobile.css	4.54KB	-
✅	CSS Theme Tokens build/css/bankingThemeLightDesktop.css	4.53KB	-
✅	CSS Theme Tokens build/css/bankingThemeLightMobile.css	4.52KB	-
✅	CSS Theme Tokens build/css/bankingThemeDarkDesktop.css	4.52KB	-
✅	CSS Theme Tokens build/css/paymentThemeLightDesktop.css	4.52KB	-
✅	CSS Theme Tokens build/css/bankingThemeDarkMobile.css	4.51KB	-
✅	CSS Theme Tokens build/css/paymentThemeLightMobile.css	4.51KB	-
✅	React Native Utils build/utils/index.native.js	2.27KB	-

Total files change +173B +0.03%

Final result: ✅

View report in BundleMon website ➡️

---

Current branch size history | Target branch size history

[saurabhdaware]

Looks good. Can you just check if it is working correctly for scenario where we do want mobile to be detected after initial load.

Also should we call those functions in useIsomorphicLayoutEffect now to detect it a bit earlier before layout shifts?

[saurabhdaware]

It should continue to detect mobile and base no? just not detect it on the initial client render 🤔

[saurabhdaware]

Now that we're not calling those functions here, are we sure they are getting called somewhere in useEffect or useLayoutEffect to make sure correct device is set on load?

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 6620ba5:

Sandbox	Source
razorpay/blade: basic	Configuration

[anuraghazra]

Let's add SSR test for useBreakpoint?

Not sure why this mismatch wasn't caught in other components. also can you link the slack thread that sumit raised?

[kamleshchandnani]

Let's add SSR test for useBreakpoint?

Not sure why this mismatch wasn't caught in other components. also can you link the slack thread that sumit raised?

It wasn't caught because the target changes from SSR(desktop because node) to client(mobile). doesn't happen when you open the SSR app on desktop itself. I've mentioned that in the description.

adding SSR test won't help either here. Can't change the breakpoints from node(desktop) to client(mobile) in the jest

[saurabhdaware]

Looks good to me. Tiny change in test description I guess?