-
Notifications
You must be signed in to change notification settings - Fork 142
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
base: master
Are you sure you want to change the base?
Conversation
const getHandlerToShow = useCallback( | ||
<T,>(handler?: (e: T) => void) => | ||
(e: T) => { |
There was a problem hiding this comment.
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]) |
There was a problem hiding this comment.
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( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
こちらも関数を返す関数になっていたため、onXxxx毎にmemo化する方法に変更しています
d7a953e
to
0c59d1b
Compare
@@ -70,7 +70,7 @@ export const Tooltip: FC<Props & ElementProps> = ({ | |||
children, | |||
triggerType, | |||
multiLine, | |||
ellipsisOnly = false, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
比較処理しかしておらず、booleanが型として必要な箇所もなかったため、undefinedのままでも問題になる可能性はありませんでした
0c495fd
to
505e51f
Compare
commit: |
b2abd7e
to
505e51f
Compare
89966da
to
e1a7afc
Compare
const calcedResponseStatus = useResponseMessage(responseMessage) | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
calcedはcalculatedってことですかね?ぱっと見読み取れなかった
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
機能的には問題なさそう
関連URL
概要
変更内容
確認方法