-
Notifications
You must be signed in to change notification settings - Fork 141
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: StatusLabel, SpreadsheetTable, SmartHRLogoの内部処理を整理する #5378
base: master
Are you sure you want to change the base?
Conversation
0b427d5
to
670635a
Compare
commit: |
670635a
to
2be4274
Compare
8e136fe
to
4f21f6e
Compare
4f21f6e
to
63652bc
Compare
return <FaCircleExclamationIcon /> | ||
} | ||
} | ||
export const StatusLabel = memo<Props>( |
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.
StatusLable自体が再レンダリングする必要性がほぼないコンポーネントのため、全体をmemo化しています
|
||
export const SpreadsheetTableCorner = () => ( | ||
export const SpreadsheetTableCorner = memo(() => ( |
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.
SpreadsheetTableCorner 自体が引数が一切ない、装飾用コンポーネントのためmemoで提供します
@@ -63,3 +59,27 @@ export const SpreadsheetTable: React.FC<Props & ElementProps> = ({ | |||
</table> | |||
) | |||
} | |||
|
|||
const MemoizedThead = memo<{ cols: number }>(({ cols }) => { |
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.
引数一つでTheadをまるごとmemo化でき、かつ再レンダリングが必要になる可能性も低いためmemo化状態で提供します
<tr key={i}> | ||
<th>{i + 1}</th> | ||
{row.map((cell, j) => ( | ||
<td key={`bodyCell-${i}-${j}`}>{cell}</td> | ||
<td key={`${i}-${j}`}>{cell}</td> |
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.
ループ中でダブらないkeyにできればいいため、余計なテキストとの結合をやめます
}), | ||
[className, fill, height, width], | ||
) | ||
export const SmartHRLogo = memo<Props & ElementProps>( |
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.
Logoは一度レンダリングすれば、再レンダリングが必要になる可能性が低いため、丸ごとmemoしています
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.
LGTM!
関連URL
概要
変更内容
確認方法