lywsvip/supabase
1
0
Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-06-04 11:51:55 +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

37
apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
View File

@@ -1,6 +1,6 @@
import { useRouter } from 'next/router'
import { memo, useEffect } from 'react'
import { menuState } from '~/hooks/useMenuState'
import { menuState, useMenuLevelId } from '~/hooks/useMenuState'
import NavigationMenuGuideList from './NavigationMenuGuideList'
import NavigationMenuRefList from './NavigationMenuRefList'
// @ts-expect-error
@@ -153,20 +153,33 @@ const SideNav = () => {
}
}, [router.events])
const level = useMenuLevelId()
const isHomeActive = 'home' === level
const isGettingStartedActive = 'gettingstarted' === level
const isDatabaseActive = 'database' === level
const isFunctionsActive = 'functions' === level
const isRealtimeActive = 'realtime' === level
const isStorageActive = 'storage' === level
const isPlatformActive = 'platform' === level
const isResourcesActive = 'resources' === level
const isIntegrationsActive = 'integrations' === level
const isReferenceActive = 'reference' === level
return (
<div className="flex relative">
{/* // main menu */}
<NavigationMenuHome />
<NavigationMenuGuideList id={'gettingstarted'} />
<NavigationMenuGuideList id={'database'} />
<NavigationMenuGuideList id={'auth'} />
<NavigationMenuGuideList id={'functions'} />
<NavigationMenuGuideList id={'realtime'} />
<NavigationMenuGuideList id={'storage'} />
<NavigationMenuGuideList id={'platform'} />
<NavigationMenuGuideList id={'resources'} />
<NavigationMenuGuideList id={'integrations'} />
<NavigationMenuGuideList id={'reference'} />
<NavigationMenuHome active={isHomeActive} />
<NavigationMenuGuideList id={'gettingstarted'} active={isGettingStartedActive} />
<NavigationMenuGuideList id={'database'} active={isDatabaseActive} />
<NavigationMenuGuideList id={'auth'} active={isDatabaseActive} />
<NavigationMenuGuideList id={'functions'} active={isFunctionsActive} />
<NavigationMenuGuideList id={'realtime'} active={isRealtimeActive} />
<NavigationMenuGuideList id={'storage'} active={isStorageActive} />
<NavigationMenuGuideList id={'platform'} active={isPlatformActive} />
<NavigationMenuGuideList id={'resources'} active={isResourcesActive} />
<NavigationMenuGuideList id={'integrations'} active={isIntegrationsActive} />
<NavigationMenuGuideList id={'reference'} active={isReferenceActive} />
{/* // Client Libs */}
<NavigationMenuRefList
key={'reference-js-menu'}