Skip to content

fix(PageLayout): update useLayoutEffect to isomorphic effect #2432

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Oct 17, 2022
Merged

fix(PageLayout): update useLayoutEffect to isomorphic effect #2432

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
592f64b
fix(PageLayout): update useLayoutEffect to isomorphic effect
joshblack Oct 13, 2022
d1fb9d2
refactor(useResponsiveValue): use fallback value during SSR
joshblack Oct 13, 2022
8d6d6db
chore: add changeset
joshblack Oct 13, 2022
d4e4616
Merge branch 'main' into 2430-add-isomorphic-effect
joshblack Oct 14, 2022
7c0538e
Merge branch 'main' into 2430-add-isomorphic-effect
joshblack Oct 17, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/healthy-icons-build.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@primer/react': patch
---

Update useStickyPaneHeight and useMedia to not warn during SSR
3 changes: 2 additions & 1 deletion src/PageLayout/useStickyPaneHeight.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from 'react'
import {useInView} from 'react-intersection-observer'
import {canUseDOM} from '../utils/environment'
import useLayoutEffect from '../utils/useIsomorphicLayoutEffect'

/**
* Calculates the height of the sticky pane such that it always
Expand Down Expand Up @@ -49,7 +50,7 @@ export function useStickyPaneHeight() {
// if the pane is sticky.
const [isEnabled, setIsEnabled] = React.useState(false)

React.useLayoutEffect(() => {
useLayoutEffect(() => {
const scrollContainer = getScrollContainer(rootRef.current)

if (isEnabled && (contentTopInView || contentBottomInView)) {
Expand Down
6 changes: 3 additions & 3 deletions src/hooks/useResponsiveValue.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,9 +49,9 @@ export function isResponsiveValue(value: any): value is ResponsiveValue<any> {
export function useResponsiveValue<T, F>(value: T, fallback: F): FlattenResponsiveValue<T> | F {
// Check viewport size
// TODO: What is the performance cost of creating media query listeners in this hook?
const isNarrowViewport = useMedia(viewportRanges.narrow)
const isRegularViewport = useMedia(viewportRanges.regular)
const isWideViewport = useMedia(viewportRanges.wide)
const isNarrowViewport = useMedia(viewportRanges.narrow, false)
const isRegularViewport = useMedia(viewportRanges.regular, false)
const isWideViewport = useMedia(viewportRanges.wide, false)

if (isResponsiveValue(value)) {
// If we've reached this line, we know that value is a responsive value
Expand Down