feat: add whyDidYouRender debugging tool

[kylemocode]

Why need this change? / Root cause:

• add whyDidYouRender debugging tool
• only load it in development mode, so it will not increase the production bundle size
• use this tools for performance optimization in the future

How to use ?

add whyDidYouRender property to component like this

And it will show unnecessary re-renders and their reasons in the browser console

Reference & How to use this tool ?

• https://medium.com/welldone-software/why-did-you-render-mr-big-pure-react-component-2a36dd86996f
• https://medium.com/welldone-software/why-did-you-render-mr-big-pure-react-component-part-2-common-fixing-scenarios-667bfdec2e0f
• https://medium.com/welldone-software/track-redundant-re-renders-that-caused-by-hooks-with-why-did-you-render-version-3-504468deb653

[sonarqubecloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[GaaSBot]

✅ Knip Scan Result for c5742c5

Unused files (8)

Unused files (8)
.bundlewatch.config.js
components/shared/Modal/index.tsx
components/shared/Modalow/Example.tsx
components/shared/Toast/CtxToastQueue.tsx
lighthouserc.js
mocks/rooms.ts
scripts/knipScanReporter.js
scripts/lhciScanReporter.js

Unused dependencies (3)

Unused dependencies (3)
@svgr/webpack package.json
sharp package.json
swr package.json

Unused devDependencies (4)

Unused devDependencies (4)
@actions/github package.json
@octokit/core package.json
@storybook/blocks package.json
@storybook/testing-library package.json

Unused exports (3)

Unused exports (3)
RoomsListTitle components/rooms/RoomsList.tsx
setFlags components/shared/Modal/ModalManager/src/ModalManagerBase.tsx
createNicknameEndpoint requests/users/index.ts

Unused exports in namespaces (7)

Unused exports in namespaces (7)
dotSizeVariants components/shared/Badge/Badge.tsx
textSizeVariants components/shared/Badge/Badge.tsx
INITIAL_TOAST_POSITION components/shared/Toast/ToastQueueContext.tsx
MAX_TOAST_MOUNT_SIZE components/shared/Toast/ToastQueueContext.tsx
MAX_TOAST_QUEUE_SIZE components/shared/Toast/ToastQueueContext.tsx
TOAST_QUEUE_STATE components/shared/Toast/ToastQueueContext.tsx
ToastQueueContext components/shared/Toast/ToastQueueContext.tsx

Unused exported types (22)

Unused exported types (22)
GameListProp interface components/lobby/CreateRoomModal/GameListModal/GameList/index.tsx
GroupedGamesType type components/lobby/CreateRoomModal/GameListModal/GameList/index.tsx
RoomBreadcrumbType type components/rooms/RoomBreadcrumb.tsx
RoomButtonGroupProps type components/rooms/RoomButtonGroup.tsx
RoomChatroom type components/rooms/RoomChatroom/RoomChatroom.tsx
RoomUserCardListProps type components/rooms/RoomUserCardList/RoomUserCardList.tsx
DisabledUserCardProp interface components/rooms/RoomUserCardList/UserCard/UserCard.tsx
WatingUserCardProp interface components/rooms/RoomUserCardList/UserCard/UserCard.tsx
CarouselArrowButtonProps interface components/shared/Carousel/CarouselArrowButton.tsx
CarouselItemProps interface components/shared/Carousel/CarouselItem.tsx
CoverProps interface components/shared/Cover/index.tsx
IconProps type components/shared/Icon/Icon.tsx
BodyProps interface components/shared/Modalow/Body.tsx
FooterProps interface components/shared/Modalow/Footer.tsx
HeaderProps interface components/shared/Modalow/Header.tsx
MaskProps interface components/shared/Modalow/Mask.tsx
SOCKET_EVENT enum hooks/useChatroom.ts
WS_ReadyState enum hooks/useChatroom.ts
CookieKey enum hooks/useCookie.ts
Game type requests/rooms/index.ts
PageMeta type requests/rooms/index.ts
RoomEntry type requests/rooms/index.ts

Unused exported types in namespaces (33)

Unused exported types in namespaces (33)
AvatarButtonProps interface components/shared/Avatar/Avatar.tsx
AvatarImageProps interface components/shared/Avatar/Avatar.tsx
AvatarLinkProps interface components/shared/Avatar/Avatar.tsx
AvatarProps type components/shared/Avatar/Avatar.tsx
AvatarShape type components/shared/Avatar/Avatar.tsx
AvatarSizeType type components/shared/Avatar/Avatar.tsx
AvatarType type components/shared/Avatar/Avatar.tsx
BaseAvatarProps interface components/shared/Avatar/Avatar.tsx
BadgePositionVariant enum components/shared/Badge/Badge.tsx
BadgeProps interface components/shared/Badge/Badge.tsx
BadgeSizeVariant enum components/shared/Badge/Badge.tsx
BaseButtonProps interface components/shared/Button/Button.tsx
ButtonProps type components/shared/Button/Button.tsx
CarouselProps interface components/shared/Carousel/Carousel.tsx
InputProps interface components/shared/Input/Input.tsx
ModalSizeVariant enum components/shared/Modalow/Modalow.tsx
PortalProps interface components/shared/Portal/Portal.tsx
SearchBarProps interface components/shared/SearchBar/SearchBar.tsx
SubmitHandler type components/shared/SearchBar/SearchBar.tsx
TabProps interface components/shared/Tabs/Tab.tsx
TabSizeType type components/shared/Tabs/Tabs.tsx
TagProps interface components/shared/Tag/Tag.tsx
ToastPropLength type components/shared/Toast/Toast.tsx
ToastPropRounded type components/shared/Toast/Toast.tsx
ToastPropSize type components/shared/Toast/Toast.tsx
ToastPropState type components/shared/Toast/Toast.tsx
CtxToastQueueProviderProps interface components/shared/Toast/ToastQueueContext.tsx
CtxToastQueueValue interface components/shared/Toast/ToastQueueContext.tsx
ToastQueueMap type components/shared/Toast/ToastQueueContext.tsx
ToastQueueMapValue type components/shared/Toast/ToastQueueContext.tsx
ToastQueueState type components/shared/Toast/ToastQueueContext.tsx
ToastQueueValue type components/shared/Toast/ToastQueueContext.tsx
UseToast interface components/shared/Toast/useToast.tsx

Duplicate exports (10)

Duplicate exports (10)
RoomChatroom, default components/rooms/RoomChatroom/RoomChatroom.tsx
Badge, default components/shared/Badge/Badge.tsx
Button, default components/shared/Button/Button.tsx
Input, default components/shared/Input/Input.tsx
Body, default components/shared/Modalow/Body.tsx
Footer, default components/shared/Modalow/Footer.tsx
Header, default components/shared/Modalow/Header.tsx
Mask, default components/shared/Modalow/Mask.tsx
Modalow, default components/shared/Modalow/Modalow.tsx
SearchBar, default components/shared/SearchBar/SearchBar.tsx

Configuration issues (1)

Configuration issues (1)
Unused item in ignoreDependencies: @next/bundle-analyzer

[GaaSBot]

🤖 Lighthouse Scan Result for c5742c5

/rooms

Metric	Value
Performance	67
Seo	80
Accessibility	78
HTML Report for LHCI Scan	Report Link

/rooms/abc

Metric	Value
Performance	77
Seo	80
Accessibility	67
HTML Report for LHCI Scan	Report Link

/login

Metric	Value
Performance	52
Seo	80
Accessibility	94
HTML Report for LHCI Scan	Report Link