fix console errors from bezier-react #2238

nabi-chan · 2024-05-24T13:53:58Z

Self Checklist

I wrote a PR title in English and added an appropriate label to the PR.
I wrote the commit message in English and to follow the Conventional Commits specification.
I added the changeset about the changes that needed to be released. (or didn't have to)
I wrote or updated documentation related to the changes. (or didn't have to)
I wrote or updated tests related to the changes. (or didn't have to)
I tested the changes in various browsers. (or didn't have to)
- Windows: Chrome, Edge, (Optional) Firefox
- macOS: Chrome, Edge, Safari, (Optional) Firefox

Related Issue

None

Summary

bezier-react 를 사용할 때 뜨는 리액트 경고를 해결합니다.

Details

ToastContainer 내 `Each child in a list should have a unique "key" prop.` 경고

이 이슈는 다음의 원인으로 인해 발생하는 이슈입니다.

packages/bezier-react/src/components/Toast/Toast.tsx 내 createContainer 함수에서 InvertedThemeProvider를 사용하게 되는데, 이때 해당 컴포넌트에 key값이 들어가지 않아 생기는 에러입니다.

이를 InvertedThemeProvider 내에 넣도록 변경함으로써, 문제를 해결하고자 합니다.

BaseTagBadgeText 내 `forwardRef render functions accept exactly two parameters: props and ref. Did you forget to use the ref parameter?` 에러

이 이슈는 다음 원인으로 인해 발생됨이 추정됩니다.
stack trace를 따라가다보면, 최종 끝에 다다르는 파일이 BaseTagBadge.mjs 에 위치하게 되는데, 여기서 유일하게 ref parameter를 사용하지 않는 컴포넌트는 BaseTagBadgeText 컴포넌트가 유일합니다.

따라서 해당 컴포넌트에 forwardRef를 사용하게 함으로써 이 문제를 해결하고자 합니다.

NextJS와 같은 SSR 환경에서 useLayoutEffect가 동작하지 않는 이슈

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.

https://reactjs.org/link/uselayouteffect-ssr 에 따르면, SSR 환경에서는 useLayoutEffect가 동작하지 않게 되고, 이는 곧 hydration mismatch로 이어지게 되어 해당 경고가 출력됨을 안내하고 있습니다.

여기서 제시하는 방법은 총 2가지로, 1. useLayoutEffect 를 useEffect 로 변경하거나, 2. useLayoutEffect를 사용하는 컴포넌트를 Lazy하게 로딩하는 방법을 제시하고 있습니다.

하지만 위 2가지 방법은 각각 다음과 같은 문제가 있는데요.

1번의 경우 : useEffect를 사용하게 되어 처음 의도하였던 UX에서 벗어날 여지가 있습니다.
2번의 경우 : 컴포넌트를 Lazy하게 로딩하는 경우, SSR 환경에서 하위 컴포넌트가 로딩되지 않아 SEO에 부정적인 영향을 미치게 됩니다.

이 대신 서버사이드 렌더링 환경에서는 useEffect를 반환하고, 클라이언트사이드 환경에서는 useLayoutEffect를 사용하는 useIsomorphicLayoutEffect 을 만들어 이 문제를 해결하고자 합니다. (#)

해당 방식은 react-redux 와 react-beautiful-dnd 와 같이 유명한 라이브러리에서 사용되고 있어, 안정성이 보장된다고 판단됩니다.

Breaking change? (Yes/No)

NO

References

useLayoutEffect and SSR

changeset-bot · 2024-05-24T13:54:02Z

🦋 Changeset detected

Latest commit: 16dc30d

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

This PR includes changesets to release 2 packages

Name	Type
@channel.io/bezier-react	Patch
bezier-figma-plugin	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

channeltalk · 2024-05-24T13:54:02Z

https://desk.channel.io/#/channels/1/team_chats/groups/1237/66509bfa51a6c462079e

codecov · 2024-05-24T13:56:39Z

Codecov Report

Attention: Patch coverage is 88.23529% with 2 lines in your changes are missing coverage. Please review.

Project coverage is 84.65%. Comparing base (8136579) to head (16dc30d).

Files	Patch %	Lines
...react/src/components/BaseTagBadge/BaseTagBadge.tsx	0.00%	1 Missing ⚠️
...ckages/bezier-react/src/components/Toast/Toast.tsx	0.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #2238      +/-   ##
==========================================
+ Coverage   84.61%   84.65%   +0.03%     
==========================================
  Files         135      136       +1     
  Lines        2886     2893       +7     
  Branches      875      876       +1     
==========================================
+ Hits         2442     2449       +7     
  Misses        415      415              
  Partials       29       29

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

github-actions · 2024-05-24T13:57:27Z

Chromatic Report

🚀 Congratulations! Your build was successful!

- bezier react 내 오류로 인해 콘솔에 오류가 뜨는 문제를 해결합니다. - bezier react 의 버전을 2.0.6으로 업데이트 합니다. channel-io/bezier-react#2238 (comment)

* [v2] initial commit * chore: add .vscode setting * [v2] add global layout (#14) - 어드민 / 사이트 레이아웃 추가 * chore: drop prisma migration * chore: add styled-components support * chore: update supabase type * [v2] 블로그 기능을 추가 (#16) - [x] 에디터 정하기 - [x] AST를 렌더링 하는 기능 추가하기 - [x] API 연결하기 * docs: update README.md * [v2] fix blog issues (#17) - [x] 브라우저가 다크모드일때 컨텐츠가 검정색으로 나오는 이슈 - [x] github-markdown-css를 styled-components로 이동 - [x] 좁은 뷰포트에서 블로그 네비바가 깨지는 문제를 해결 - [x] Github Callout - [x] Github에 하드링크된 코드 제거 * [v2] patch bezier-react (#18) - bezier react 내 오류로 인해 콘솔에 오류가 뜨는 문제를 해결합니다. - bezier react 의 버전을 2.0.6으로 업데이트 합니다. channel-io/bezier-react#2238 (comment) * [v2] add custom page features (#19) * [v2] allow raw html in markdown (#20) # In this PR... - raw한 html을 마크다운 파일에서 받았을 때, 이를 렌더링 할 수 있도록 합니다. * [v2] fix invalidate post query not working * [v2] add deleting feature (#21) ## Whats in this PR... - 페이지를 삭제하는 기능을 추가 - 블로그 글을 삭제하는 기능을 추가 * [v2] fix shikijs style and transformers

.changeset/red-worms-argue.md

packages/bezier-react/src/components/BaseTagBadge/BaseTagBadge.tsx

.changeset/red-worms-argue.md

yangwooseong · 2024-05-28T09:21:42Z

PR에 적절한 라벨을 붙여주세요

sungik-choi

👍
앤드류께서 남겨주신 코멘트만 반영해주시면 LGTM 입니다.

- forwardRef -> forwardedRef

- add description

- remove line-break on jsdoc

.changeset/red-worms-argue.md

Co-authored-by: Yang Wooseong (Andrew) <[email protected]>

@yangwooseong

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @channel.io/[email protected] ### Patch Changes - Change `position` property of `ToastContainer` to `fixed` ([#2245](#2245)) by @yangwooseong - Fix typo in `IconProps` jsdoc ([#2232](#2232)) by @yangwooseong - - Fix ReactJS console warnings. ([#2238](#2238)) by @nabi-chan - Introduce `useIsomorphicLayoutEffect` hook to use `useLayoutEffect` in SSR environment. - Add `AlphaSpinner` component ([#2237](#2237)) by @yangwooseong ## [email protected] ### Patch Changes - Updated dependencies - @channel.io/[email protected] Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

nabi-chan self-assigned this May 24, 2024

nabi-chan requested review from sungik-choi and yangwooseong as code owners May 24, 2024 13:53

nabi-chan mentioned this pull request May 24, 2024

[v2] patch bezier-react nabi-chan/blog#18

Merged

nabi-chan commented May 28, 2024

View reviewed changes

.changeset/red-worms-argue.md Outdated Show resolved Hide resolved

yangwooseong approved these changes May 28, 2024

View reviewed changes

packages/bezier-react/src/components/BaseTagBadge/BaseTagBadge.tsx Outdated Show resolved Hide resolved

yangwooseong reviewed May 28, 2024

View reviewed changes

.changeset/red-worms-argue.md Outdated Show resolved Hide resolved

sungik-choi approved these changes May 28, 2024

View reviewed changes

yangwooseong force-pushed the fix/console-errors branch from 8b8a813 to d9fce7a Compare May 29, 2024 01:15

nabi-chan added enhancement Issues or PR related to making existing features better refactoring Issue or PR related to refactoring with no functional changes and removed refactoring Issue or PR related to refactoring with no functional changes labels May 29, 2024

nabi-chan force-pushed the fix/console-errors branch from d9fce7a to 08d41b2 Compare May 29, 2024 05:40

nabi-chan and others added 8 commits May 29, 2024 14:41

fix: fix react key errors in ToastContainer

645fc31

fix: fix react forwardRef errors in BaseTagBadgeText

9e5a180

fix: add useIsomorphicLayoutEffect for SSR hydration warning

23d9e6c

chore: add changeset

397c975

chore: fix changeset to patch

78d67c3

refactor: reword forwardRef to forwardedRef

29923e9

- forwardRef -> forwardedRef

docs: add description on useIsomorphicLayoutEffect

74d6741

- add description

chore: update changeset content

bce1622

nabi-chan force-pushed the fix/console-errors branch from 08d41b2 to bce1622 Compare May 29, 2024 05:41

fix: fix eslint error

b553a12

- remove line-break on jsdoc

yangwooseong reviewed May 29, 2024

View reviewed changes

.changeset/red-worms-argue.md Outdated Show resolved Hide resolved

chore: add useIsomorphicLayoutEffect introduction on changeset

16dc30d

Co-authored-by: Yang Wooseong (Andrew) <[email protected]>

nabi-chan merged commit 1fa1309 into main May 29, 2024
9 checks passed

nabi-chan deleted the fix/console-errors branch May 29, 2024 06:36

ch-builder mentioned this pull request May 29, 2024

ci(changesets): version packages #2233

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix console errors from bezier-react #2238

fix console errors from bezier-react #2238

nabi-chan commented May 24, 2024

changeset-bot bot commented May 24, 2024 •

edited

Loading

channeltalk bot commented May 24, 2024

codecov bot commented May 24, 2024 •

edited

Loading

github-actions bot commented May 24, 2024 •

edited

Loading

yangwooseong commented May 28, 2024 •

edited

Loading

sungik-choi left a comment

fix console errors from bezier-react #2238

fix console errors from bezier-react #2238

Conversation

nabi-chan commented May 24, 2024

Self Checklist

Related Issue

Summary

Details

ToastContainer 내 Each child in a list should have a unique "key" prop. 경고

BaseTagBadgeText 내 forwardRef render functions accept exactly two parameters: props and ref. Did you forget to use the ref parameter? 에러

NextJS와 같은 SSR 환경에서 useLayoutEffect가 동작하지 않는 이슈

Breaking change? (Yes/No)

References

changeset-bot bot commented May 24, 2024 • edited Loading

🦋 Changeset detected

channeltalk bot commented May 24, 2024

codecov bot commented May 24, 2024 • edited Loading

Codecov Report

github-actions bot commented May 24, 2024 • edited Loading

Chromatic Report

yangwooseong commented May 28, 2024 • edited Loading

sungik-choi left a comment

Choose a reason for hiding this comment

ToastContainer 내 `Each child in a list should have a unique "key" prop.` 경고

BaseTagBadgeText 내 `forwardRef render functions accept exactly two parameters: props and ref. Did you forget to use the ref parameter?` 에러

changeset-bot bot commented May 24, 2024 •

edited

Loading

codecov bot commented May 24, 2024 •

edited

Loading

github-actions bot commented May 24, 2024 •

edited

Loading

yangwooseong commented May 28, 2024 •

edited

Loading