Skip to content

Commit 85c5bb7

Browse files
authored
[MediaQueryProvider] Fix SSR hydration issues (#12824)
### WHY are these changes introduced? Fixes #11886 Server-side rendering defaults to `isNavigationCollapsed` being `false`, which causes a React hydration issue when rendered on the client at smaller breakpoints (where the value evaluates as `true`). ### WHAT is this pull request doing? This modifies the initial render state of `isNavigationCollapsed` to match the server-side rendered value (`false`) and relies on the existing `useEffect` to update the value on the client-side after hydration. <details> <summary>Before change - React hydration errors at small breakpoints</summary> https://github.com/user-attachments/assets/78f45469-3ae3-44a3-97eb-94598c732a72 </details> <details> <summary>After change - No React hydration errors at small breakpoints</summary> https://github.com/user-attachments/assets/f14efd84-00b3-4a62-9ea9-878f52da0d8d </details> ### How to 🎩 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#install-dependencies-and-build-workspaces) 🗒 [General tophatting guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md) 📄 [Changelog guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog) ### 🎩 checklist - [ ] Tested a [snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases) - [ ] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [ ] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers) - [ ] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [ ] Updated the component's `README.md` with documentation changes - [ ] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide
1 parent 57e6cbe commit 85c5bb7

File tree

2 files changed

+6
-3
lines changed

2 files changed

+6
-3
lines changed

.changeset/fast-chicken-help.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@shopify/polaris': patch
3+
---
4+
5+
Fix hydration issues with SSR

polaris-react/src/components/MediaQueryProvider/MediaQueryProvider.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,7 @@ interface Props {
1313
export const MediaQueryProvider = function MediaQueryProvider({
1414
children,
1515
}: Props) {
16-
const [isNavigationCollapsed, setIsNavigationCollapsed] = useState(
17-
navigationBarCollapsed().matches,
18-
);
16+
const [isNavigationCollapsed, setIsNavigationCollapsed] = useState(false);
1917

2018
// eslint-disable-next-line react-hooks/exhaustive-deps
2119
const handleResize = useCallback(

0 commit comments

Comments
 (0)