lywsvip/supabase
1
0
Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-05-31 09:52:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

start using react.memo to stop re-renders

Browse Source
This commit is contained in:
Jonathan Summers-Muir
2022-12-14 01:39:57 +08:00
parent 83d46e9284
commit 6bc027997d
3 changed files with 37 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx
View File

@@ -1,32 +1,27 @@
import * as Accordion from '@radix-ui/react-accordion'
import { useTheme } from 'common/Providers'
import Image from 'next/image'
import Link from 'next/link'
import { useRouter } from 'next/router'
import React from 'react'
import { IconChevronLeft } from '~/../../packages/ui'
import { useMenuLevelId } from '~/hooks/useMenuState'
import * as NavItems from './NavigationMenu.constants'
import * as Accordion from '@radix-ui/react-accordion'
interface Props {
id: string
setMenuLevelId?: any
active: boolean
}
const NavigationMenuGuideList: React.FC<Props> = ({ id, setMenuLevelId }) => {
const NavigationMenuGuideList: React.FC<Props> = ({ id, active }) => {
const router = useRouter()
const { isDarkMode } = useTheme()
const menu = NavItems[id]
//console.log(id, 'url is:', menu.url)
// get url
const url = router.asPath
// remove the end of the url if a deep link
const firstLevelRoute = url?.split('/')?.slice(0, 4)?.join('/')
const level = useMenuLevelId()
return (
<Accordion.Root
collapsible
@@ -36,12 +31,12 @@ const NavigationMenuGuideList: React.FC<Props> = ({ id, setMenuLevelId }) => {
className={[
'transition-all ml-8 duration-150 ease-out',
// enabled
level === id && 'opacity-100 ml-0 delay-150',
level === 'home' && 'ml-12',
active && 'opacity-100 ml-0 delay-150',
// level === 'home' && 'ml-12',
// disabled
level !== 'home' && level !== id ? '-ml-8' : '',
level !== id ? 'opacity-0 invisible absolute' : '',
// level !== 'home' && level !== id ? '-ml-8' : '',
active ? 'opacity-0 invisible absolute' : '',
].join(' ')}
>
<ul className={['relative w-full flex flex-col gap-0'].join(' ')}>
@@ -83,7 +78,7 @@ const NavigationMenuGuideList: React.FC<Props> = ({ id, setMenuLevelId }) => {
: 'hover:text-brand-900 text-scale-1200',
].join(' ')}
>
{menu.title ?? level}
{menu.title ?? id}
</span>
</div>
</a>
@@ -228,4 +223,4 @@ const NavigationMenuGuideList: React.FC<Props> = ({ id, setMenuLevelId }) => {
)
}
export default NavigationMenuGuideList
export default React.memo(NavigationMenuGuideList)