Skip to content

Use Isomorphic effect - #1583

Merged
pksjce merged 7 commits into
mainfrom
pk/overlay-fix
Nov 10, 2021
Merged

Use Isomorphic effect#1583
pksjce merged 7 commits into
mainfrom
pk/overlay-fix

Conversation

@pksjce

Copy link
Copy Markdown
Contributor

Describe your changes here.

In #1453, we see that useLayoutEffect causes SSR warnings. This is the nature of the function. One proven way of mitigating this is to use useLayoutEffect in the client mode and useEffect when called in the SSR mode.
Reference - https://medium.com/@alexandereardon/uselayouteffect-and-ssr-192986cdcf7a

Closes#1453

Screenshots

No changes

Merge checklist

  • Added/updated tests
  • Added/updated documentation
  • Tested in Chrome
  • Tested in Firefox
  • Tested in Safari
  • Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

@pksjce
pksjce requested review from a team and rezrahNovember 8, 2021 05:53
@changeset-bot

changeset-botBot commented Nov 8, 2021

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: a17e3d5

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

This PR includes changesets to release 1 package
NameType
@primer/componentsPatch

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

github-actionsBot commented Nov 8, 2021

Copy link
Copy Markdown
Contributor

size-limit report 📦

PathSize
dist/browser.esm.js54.21 KB (+0.02% 🔺)
dist/browser.umd.js54.61 KB (+0.02% 🔺)

@pksjcepksjce changed the title Use Isomorphic effect[WIP]Use Isomorphic effectNov 8, 2021
@siddharthkp

siddharthkp commented Nov 8, 2021

Copy link
Copy Markdown
Member

Good fix!

Ship it when the tests pass :)

@pksjce
pksjce merged commit 24b1ebb into mainNov 10, 2021
@pksjce
pksjce deleted the pk/overlay-fix branch November 10, 2021 01:23
@primer-cssprimer-css mentioned this pull request Nov 10, 2021
pksjce added a commit that referenced this pull request Nov 15, 2021
* Use Isomorphic effect
* Create brown-squids-unite.md
* Fix eslint rules
* Make it typescript
* Add back the eslint disables
* Fix up the tests and make the method more robust
* Fix lint
Co-authored-by: Pavithra Kodmad <pksjce@github.com>
@primer-cssprimer-css mentioned this pull request Nov 16, 2021
@siddharthkpsiddharthkp changed the title [WIP]Use Isomorphic effectUse Isomorphic effectNov 17, 2021
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Overlay causes useLayoutEffect warnings in SSR mode

2 participants

@pksjce@siddharthkp