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

chore: Tooltipの内部ロジックをリファクタリングする #5245

Open
wants to merge 12 commits into
base: master
Choose a base branch
from

Conversation

AtsushiM
Copy link
Member

@AtsushiM AtsushiM commented Jan 9, 2025

関連URL

概要

変更内容

確認方法

Comment on lines -102 to -104
const getHandlerToShow = useCallback(
<T,>(handler?: (e: T) => void) =>
(e: T) => {
Copy link
Member Author

Choose a reason for hiding this comment

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

もともとの方法では 関数を返す関数 をmemo化していました。
共通化以上の意味が薄く、関数も毎回生成されるので以下のように修正しました

  • 共通ロジックを切り出して ellipsisOnly が変更されない限り再生成されないように修正
  • 上記共通ロジックを使ったonXxxx毎の関数をmemo化

これにより適切にメモ化されるようになり、基本的な使い方をしている限り、関数が再生成されないようになっています

const hiddenText = useMemo(() => innerText(message), [message])
const isIcon = triggerType === 'icon'
const styles = tooltip({ isIcon, className })
const styles = useMemo(() => tooltip({ isIcon, className }), [isIcon, className])
Copy link
Member Author

Choose a reason for hiding this comment

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

tailwindのstyle生成も再レンダリング毎に再生成されていたのでmemo化しています


const getHandlerToHide = useCallback(
Copy link
Member Author

Choose a reason for hiding this comment

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

こちらも関数を返す関数になっていたため、onXxxx毎にmemo化する方法に変更しています

@yagimushi yagimushi force-pushed the chore-memoized-Tooltip branch from d7a953e to 0c59d1b Compare January 9, 2025 00:12
@AtsushiM AtsushiM changed the title Chore memoized tooltip chore: Tooltipの内部ロジックをリファクタリングする Jan 9, 2025
@@ -70,7 +70,7 @@ export const Tooltip: FC<Props & ElementProps> = ({
children,
triggerType,
multiLine,
ellipsisOnly = false,
Copy link
Member Author

Choose a reason for hiding this comment

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

比較処理しかしておらず、booleanが型として必要な箇所もなかったため、undefinedのままでも問題になる可能性はありませんでした

@yagimushi yagimushi force-pushed the chore-memoized-Tooltip branch 2 times, most recently from 0c495fd to 505e51f Compare January 9, 2025 00:21
Copy link

pkg-pr-new bot commented Jan 9, 2025

Open in Stackblitz

npm i https://pkg.pr.new/kufu/smarthr-ui@5245

commit: 94c0328

@yagimushi yagimushi force-pushed the chore-memoized-Tooltip branch 10 times, most recently from b2abd7e to 505e51f Compare January 9, 2025 01:03
@yagimushi yagimushi force-pushed the chore-memoized-Tooltip branch from 89966da to e1a7afc Compare February 16, 2025 23:21
@AtsushiM AtsushiM marked this pull request as ready for review February 16, 2025 23:25
@AtsushiM AtsushiM requested a review from a team as a code owner February 16, 2025 23:25
@AtsushiM AtsushiM requested review from misako0927 and yuzuru-akiyama and removed request for a team February 16, 2025 23:25
Comment on lines +138 to +139
const calcedResponseStatus = useResponseMessage(responseMessage)

Copy link
Contributor

Choose a reason for hiding this comment

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

calcedはcalculatedってことですかね?ぱっと見読み取れなかった

Copy link
Contributor

@masa0527 masa0527 left a comment

Choose a reason for hiding this comment

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

機能的には問題なさそう

Sign up for free to 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.

2 participants