feat(hook/utils): add useIsomorphicLayoutEffect #239

minsoo-web · 2023-10-19T09:02:29Z

Overview

To distinguish whether it is a client or server environment from a hook or component using useEffect

I will change the useEffect used in places where the client environment and the server environment should be distinguished to the useIsomorphicLayoutEffect.

PR Checklist

I did below actions if need

I read the Contributing Guide
I added documents and tests.

changeset-bot · 2023-10-19T09:02:33Z

⚠️ No Changeset found

Latest commit: 5aa8c3e

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

vercel · 2023-10-19T09:02:36Z

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 20, 2023 0:00am

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
visualization	⬜️ Ignored (Inspect)	Visit Preview		Oct 20, 2023 0:00am

codecov · 2023-10-19T09:04:41Z

Codecov Report

Merging #239 (5aa8c3e) into main (8d80537) will not change coverage.
The diff coverage is 100.00%.

@@            Coverage Diff            @@
##              main      #239   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           21        22    +1     
  Lines          846       850    +4     
  Branches       149       150    +1     
=========================================
+ Hits           846       850    +4

Components	Coverage Δ
@suspensive/react	`100.00% <100.00%> (ø)`
@suspensive/react-query	`∅ <ø> (∅)`

vercel · 2023-10-19T09:07:22Z

Deployment failed with the following error:

Resource is limited - try again in 22 minutes (more than 100, code: "api-deployments-free-per-day").

manudeli · 2023-10-19T11:46:05Z

packages/react/src/utils/isServer.ts

@@ -0,0 +1,3 @@
+export const isServer = () => {
+  return typeof window === 'undefined' && typeof global !== 'undefined'


I don't know why we should check global. could you explain it please?

No global checking libraries references

usehoos-ts(check only window): https://usehooks-ts.com/react-hook/use-isomorphic-layout-effect

react-use(check only window): https://github.com/streamich/react-use/blob/master/src/useIsomorphicLayoutEffect.ts

use-isomorphic-layout-effect(check only document): https://github.com/Andarist/use-isomorphic-layout-effect/blob/main/src/index.ts

I think, if in node env or server env, this is global so this check is semantically equal to typeof window === 'undefined'

I can accept semantical cause. but I think if we don't check global in this case, we can get better performance. because we are making most fundamental library so this isClient function will be recalled many time. so I don't want to give up our better performance if we can

I asked this to slash library too. toss/slash#352

Every libraries I checked don't check global to know it is server or client. so I'm very curious your and slash's intention

I agree. this function is called every time in bundler position.
So this expression called inline, rather than export.

chore: delete isClient, isServer function

I delete it !! many thanks 🚀

Thanks for accepting my opinion, Let's improve this if we need to improve it after

packages/react/src/utils/index.ts

packages/react/src/hooks/useIsomorphicLayoutEffect.ts

vercel · 2023-10-19T11:57:49Z

Deployment failed with the following error:

Resource is limited - try again in 29 minutes (more than 100, code: "api-deployments-free-per-day").

Co-authored-by: Jonghyeon Ko <[email protected]>

manudeli · 2023-10-20T09:03:44Z

I think you need to use corepack with pnpm to meet your pnpm version as packageManager field of package.json. check this doc https://pnpm.io/installation#using-corepack

This is also good for install script
https://github.com/TanStack/query/blob/main/package.json#L12

manudeli · 2023-10-20T11:57:29Z

I think you need to use corepack with pnpm to meet your pnpm version as packageManager field of package.json. check this doc https://pnpm.io/installation#using-corepack

This is also good for install script https://github.com/TanStack/query/blob/main/package.json#L12

I resolved this issue in 80cec91 please use corepack please. I think we need to add this in CONTRIBUTING.md

# Overview  To distinguish whether it is a client or server environment from a hook or component using `useEffect` I will change the `useEffect` used in places where the client environment and the server environment should be distinguished to the `useIsomorphicLayoutEffect`. ## PR Checklist - [x] I did below actions if need 1. I read the [Contributing Guide](https://github.com/toss/slash/blob/main/.github/CONTRIBUTING.md) 2. I added documents and tests. --------- Co-authored-by: Jonghyeon Ko <[email protected]>

# Overview  To distinguish whether it is a client or server environment from a hook or component using `useEffect` I will change the `useEffect` used in places where the client environment and the server environment should be distinguished to the `useIsomorphicLayoutEffect`. ## PR Checklist - [x] I did below actions if need 1. I read the [Contributing Guide](https://github.com/toss/slash/blob/main/.github/CONTRIBUTING.md) 2. I added documents and tests. ---------

# Overview  To distinguish whether it is a client or server environment from a hook or component using `useEffect` I will change the `useEffect` used in places where the client environment and the server environment should be distinguished to the `useIsomorphicLayoutEffect`. ## PR Checklist - [x] I did below actions if need 1. I read the [Contributing Guide](https://github.com/toss/slash/blob/main/.github/CONTRIBUTING.md) 2. I added documents and tests. --------- Co-authored-by: Jonghyeon Ko <[email protected]>

minsoo-web added 2 commits October 19, 2023 17:51

feat(utils): add isServer & isClient

1186dd3

feat(hooks): add useIsomorphicLayoutEffect

555f571

minsoo-web requested review from manudeli and okinawaa as code owners October 19, 2023 09:02

github-actions bot added the @suspensive/react label Oct 19, 2023

vercel bot temporarily deployed to Preview – visualization October 19, 2023 09:03 Inactive

minsoo-web force-pushed the feat/add-useIsomorphicLayoutEffect branch from 93977cb to 555f571 Compare October 19, 2023 09:04

fix: convert useEffect with useLayoutEffect

9e9a171

manudeli reviewed Oct 19, 2023

View reviewed changes

manudeli added 2 commits October 19, 2023 20:57

Create shaggy-apples-brush.md

493b3e5

Merge branch 'main' into feat/add-useIsomorphicLayoutEffect

9783e59

manudeli assigned minsoo-web Oct 19, 2023

vercel bot temporarily deployed to Preview – visualization October 19, 2023 12:00 Inactive

Merge branch 'main' into feat/add-useIsomorphicLayoutEffect

56105e5

vercel bot temporarily deployed to Preview – docs October 19, 2023 15:17 Inactive

Update packages/react/src/hooks/useIsomorphicLayoutEffect.ts

0336ae3

Co-authored-by: Jonghyeon Ko <[email protected]>

vercel bot temporarily deployed to Preview – docs October 20, 2023 07:49 Inactive

vercel bot temporarily deployed to Preview – visualization October 20, 2023 07:50 Inactive

minsoo-web added 2 commits October 20, 2023 17:04

chore: pnpm install

3007ffd

chore: delete isClient, isServer function

6a2514d

github-actions bot added the dependencies label Oct 20, 2023

vercel bot temporarily deployed to Preview – docs October 20, 2023 08:06 Inactive

vercel bot temporarily deployed to Preview – visualization October 20, 2023 08:07 Inactive

chore: update pnpm-lock.yaml

91bcde6

Merge branch 'main' into feat/add-useIsomorphicLayoutEffect

80cec91

github-actions bot removed the dependencies label Oct 20, 2023

vercel bot temporarily deployed to Preview – docs October 20, 2023 11:51 Inactive

vercel bot temporarily deployed to Preview – visualization October 20, 2023 11:53 Inactive

manudeli approved these changes Oct 20, 2023

View reviewed changes

chore: update

5aa8c3e

vercel bot temporarily deployed to Preview – docs October 20, 2023 12:00 Inactive

manudeli merged commit 03992b5 into main Oct 20, 2023
15 checks passed

manudeli deleted the feat/add-useIsomorphicLayoutEffect branch October 20, 2023 12:07

manudeli mentioned this pull request Oct 20, 2023

[Feature] corepack enable in CONTRIBUTING.md #243

Closed

saul-atomrigs mentioned this pull request Mar 22, 2024

fix(@toss/utils): Add 'Deno' in globalThis for isServer() toss/slash#447

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(hook/utils): add useIsomorphicLayoutEffect #239

feat(hook/utils): add useIsomorphicLayoutEffect #239

minsoo-web commented Oct 19, 2023 •

edited

Loading

changeset-bot bot commented Oct 19, 2023 •

edited

Loading

vercel bot commented Oct 19, 2023 •

edited

Loading

codecov bot commented Oct 19, 2023 •

edited

Loading

vercel bot commented Oct 19, 2023

manudeli Oct 19, 2023 •

edited

Loading

minsoo-web Oct 20, 2023 •

edited

Loading

minsoo-web Oct 20, 2023 •

edited

Loading

minsoo-web Oct 20, 2023

manudeli Oct 20, 2023

minsoo-web Oct 20, 2023

minsoo-web Oct 20, 2023

manudeli Oct 20, 2023

vercel bot commented Oct 19, 2023

manudeli commented Oct 20, 2023 •

edited

Loading

manudeli commented Oct 20, 2023

		@@ -0,0 +1,3 @@
		export const isServer = () => {
		return typeof window === 'undefined' && typeof global !== 'undefined'

feat(hook/utils): add useIsomorphicLayoutEffect #239

feat(hook/utils): add useIsomorphicLayoutEffect #239

Conversation

minsoo-web commented Oct 19, 2023 • edited Loading

Overview

PR Checklist

changeset-bot bot commented Oct 19, 2023 • edited Loading

⚠️ No Changeset found

vercel bot commented Oct 19, 2023 • edited Loading

codecov bot commented Oct 19, 2023 • edited Loading

Codecov Report

vercel bot commented Oct 19, 2023

manudeli Oct 19, 2023 • edited Loading

Choose a reason for hiding this comment

minsoo-web Oct 20, 2023 • edited Loading

Choose a reason for hiding this comment

minsoo-web Oct 20, 2023 • edited Loading

Choose a reason for hiding this comment

minsoo-web Oct 20, 2023

Choose a reason for hiding this comment

manudeli Oct 20, 2023

Choose a reason for hiding this comment

minsoo-web Oct 20, 2023

Choose a reason for hiding this comment

minsoo-web Oct 20, 2023

Choose a reason for hiding this comment

manudeli Oct 20, 2023

Choose a reason for hiding this comment

vercel bot commented Oct 19, 2023

manudeli commented Oct 20, 2023 • edited Loading

manudeli commented Oct 20, 2023

minsoo-web commented Oct 19, 2023 •

edited

Loading

changeset-bot bot commented Oct 19, 2023 •

edited

Loading

vercel bot commented Oct 19, 2023 •

edited

Loading

codecov bot commented Oct 19, 2023 •

edited

Loading

manudeli Oct 19, 2023 •

edited

Loading

minsoo-web Oct 20, 2023 •

edited

Loading

minsoo-web Oct 20, 2023 •

edited

Loading

manudeli commented Oct 20, 2023 •

edited

Loading