Skip to content
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.

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

fix(react): rename useIsMount & update useEffect to useIsomorphicLayoutEffect #246

Merged
merged 7 commits into from
Oct 24, 2023

Conversation

minsoo-web
Copy link
Member

@minsoo-web minsoo-web commented Oct 20, 2023

Overview

I update useIsMount hook's name to useIsClient

Although I need to think more about the name, I named this hook because it is not an externally exported package, but an embedded hook used to distinguish whether it is a client environment or not.

I update useIsClient hook inside of Suspense.CSROnly from useEffect to useIsomorphicLayoutEffect

Although it is used differently depending on where it is used, useEffect is called at the mount stage, but useLayoutEffect is executed synchronously immediately after rendering, so it is possible to check whether it is in a client state or not first, so this hook is used.

PR Checklist

  • I did below actions if need
  1. I read the Contributing Guide
  2. I added documents and tests.

@changeset-bot
Copy link

changeset-bot bot commented Oct 20, 2023

🦋 Changeset detected

Latest commit: 8c72993

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

This PR includes changesets to release 2 packages
Name Type
@suspensive/react Patch
@suspensive/react-query 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

@minsoo-web minsoo-web self-assigned this Oct 20, 2023
@vercel
Copy link

vercel bot commented Oct 20, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
docs ✅ Ready (Inspect) Visit Preview 💬 Add feedback Oct 23, 2023 5:24pm
visualization ✅ Ready (Inspect) Visit Preview 💬 Add feedback Oct 23, 2023 5:24pm

@vercel vercel bot temporarily deployed to Preview – visualization October 20, 2023 17:06 Inactive
@vercel vercel bot temporarily deployed to Preview – docs October 20, 2023 17:06 Inactive
@codecov
Copy link

codecov bot commented Oct 20, 2023

Codecov Report

Merging #246 (8c72993) into main (4b4e655) will increase coverage by 0.00%.
The diff coverage is 100.00%.

Impacted file tree graph

@@           Coverage Diff           @@
##             main     #246   +/-   ##
=======================================
  Coverage   98.63%   98.63%           
=======================================
  Files          25       25           
  Lines         878      879    +1     
  Branches      152      152           
=======================================
+ Hits          866      867    +1     
  Misses         12       12           
Components Coverage Δ
@suspensive/react 98.63% <100.00%> (+<0.01%) ⬆️
@suspensive/react-query ∅ <ø> (∅)
@suspensive/react-await 95.12% <ø> (ø)

@vercel vercel bot temporarily deployed to Preview – docs October 20, 2023 22:45 Inactive
@@ -21,10 +21,10 @@ if (process.env.NODE_ENV !== 'production') {
DefaultSuspense.displayName = 'Suspense'
}
const CSROnlySuspense = (props: SuspenseProps) => {
const isMounted = useIsMounted()
const isClient = useIsCSROnly()
Copy link
Member

@manudeli manudeli Oct 20, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
const isClient = useIsCSROnly()
const isClient = useIsClient()

Can we change the name of this hook to useIsClient? If this hook is likely to be reused elsewhere in the future, I don't think it will only be used in XXX.CSROnly. In that case, I think a better name would be useIsClient rather than useIsCSROnly. Looking at the code, the return value is also the variable name isClient, so I think useIsClient would be a better name. Because the name XXX.CSROnly also means Client Side Render Only, which can be contained by isClient.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Im down

Then our Suspense
Should it be Suspense.Client, not Suspense.CSROnly?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@okinawaa I think<Suspense.CSROnly/> using useIsClient is best case.
then we will not go through BREAKING CHANGE and also naming this component as <Suspense.Client/> is not more clear to express client side render only than <Suspense.CSROnly/>.

Copy link
Member Author

@minsoo-web minsoo-web Oct 23, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@manudeli
I agree with you.

CSROnly naming will keep, and useIsCSROnly naming is will changed to useIsClient.
fix: convert naming useIsCSROnly to useIsClient

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for accepting my opinion

@manudeli manudeli changed the title refactor(react/hooks): rename useIsMount & update useEffect to useIsomorphicLayoutEffect refactor(react): rename useIsMount & update useEffect to useIsomorphicLayoutEffect Oct 20, 2023
@vercel vercel bot temporarily deployed to Preview – docs October 21, 2023 17:29 Inactive
@manudeli manudeli changed the title refactor(react): rename useIsMount & update useEffect to useIsomorphicLayoutEffect fix(react): rename useIsMount & update useEffect to useIsomorphicLayoutEffect Oct 22, 2023
@vercel vercel bot temporarily deployed to Preview – visualization October 23, 2023 00:53 Inactive
@vercel vercel bot temporarily deployed to Preview – docs October 23, 2023 00:53 Inactive
@vercel vercel bot temporarily deployed to Preview – docs October 23, 2023 02:26 Inactive
@vercel vercel bot temporarily deployed to Preview – visualization October 23, 2023 02:27 Inactive
@manudeli
Copy link
Member

manudeli commented Oct 23, 2023

@okinawaa @minsoo-web This is test using visualization

Code

// websites/visualization/src/app/react/CSROnly1/page.tsx
'use client'

import { Suspense } from '@suspensive/react'
import Link from 'next/link'
import React from 'react'

export default function Page() {
  return (
    <div>
      <Suspense.CSROnly fallback={<div style={{ backgroundColor: 'red' }}>loading...</div>}>
        <Custom/>
      </Suspense.CSROnly>
    </div>
  )
}

const Custom = () => {
  return (
    <div>
      CSROnly1
      <Link href={'/react/CSROnly2'}>to CSROnly2</Link>
    </div>
  )
}
// websites/visualization/src/app/react/CSROnly2/page.tsx
'use client'

import { Suspense } from '@suspensive/react'
import Link from 'next/link'
import React from 'react'

export default function Page() {
  return (
    <div>
      <Suspense.CSROnly fallback={<div style={{ backgroundColor: 'red' }}>loading...</div>}>
        <Custom/>
      </Suspense.CSROnly>
    </div>
  )
}

const Custom = () => {
  return (
    <div>
      CSROnly2
      <Link href={'/react/CSROnly1'}>to CSROnly1</Link>
    </div>
  )
}

AS-IS useEffect in CSROnly

If no useIsomorphicLayoutEffect, We can check sometimes red loading... fallback on every time routing.
It can cause of unnecessary layout shift.
chrome-capture-2023-9-23

TO-BE useIsomorphicLayoutEffect in CSROnly

No red loading... fallback on every time. we can provide better UX. issue resolved
chrome-capture-2023-9-23 (1)

@manudeli
Copy link
Member

manudeli commented Oct 23, 2023

@minsoo-web I think this is cool work! big thanks to you making issue and resolving it 👍👍👍
@okinawaa This is an important improvement, so I want to request not only me also you approve and merge this Pull Request if there are no further issues.

@vercel vercel bot temporarily deployed to Preview – visualization October 23, 2023 17:24 Inactive
@vercel vercel bot temporarily deployed to Preview – docs October 23, 2023 17:24 Inactive
Copy link
Member

@okinawaa okinawaa left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cool 👍

@minsoo-web minsoo-web merged commit 70d8128 into main Oct 24, 2023
15 checks passed
@minsoo-web minsoo-web deleted the fix/react/useIsMount branch October 24, 2023 04:05
manudeli pushed a commit that referenced this pull request Aug 3, 2024
manudeli pushed a commit that referenced this pull request Aug 3, 2024
manudeli pushed a commit that referenced this pull request Aug 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants