refactor: memoize everything

packages/website/src/components/RouterTransition.tsx

@@ -21,5 +21,5 @@ export function RouterTransition() {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [router.asPath]);
 
-	return <NavigationProgress />;
+	return <NavigationProgress color="blurple" />;
 }

packages/website/src/components/SidebarItems.tsx

@@ -1,7 +1,7 @@
 import { createStyles, Group, Text, NavLink, Box } from '@mantine/core';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { type Dispatch, type SetStateAction, useEffect, useState } from 'react';
+import { type Dispatch, type SetStateAction, useEffect, useState, useMemo } from 'react';
 import {
 	VscSymbolClass,
 	VscSymbolEnum,
@@ -101,7 +101,7 @@ export function SidebarItems({
 	const router = useRouter();
 	const [asPathWithoutQueryAndAnchor, setAsPathWithoutQueryAndAnchor] = useState('');
 	const { classes } = useStyles();
-	const groupItems = groupMembers(members);
+	const groupItems = useMemo(() => groupMembers(members), [members]);
 
 	useEffect(() => {
 		setAsPathWithoutQueryAndAnchor(router.asPath.split('?')[0]?.split('#')[0] ?? '');

packages/website/src/components/SidebarLayout.tsx

@@ -28,7 +28,7 @@ import type { MDXRemoteSerializeResult } from 'next-mdx-remote';
 import Image from 'next/future/image';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { type PropsWithChildren, useState, useEffect } from 'react';
+import { type PropsWithChildren, useState, useEffect, useMemo } from 'react';
 import { VscChevronDown, VscGithubInverted, VscPackage, VscVersions } from 'react-icons/vsc';
 import { WiDaySunny, WiNightClear } from 'react-icons/wi';
 import useSWR from 'swr';
@@ -170,18 +170,25 @@ export function SidebarLayout({
 
 	const { classes } = useStyles({ openedLib: openedLibPicker, openedVersion: openedVersionPicker });
 
-	const versionMenuItems =
+	const versionMenuItems = useMemo(
+		() =>
 			versions?.map((item) => (
 				<Menu.Item key={item} component={NextLink} href={`/docs/packages/${packageName ?? 'builders'}/${item}`}>
 					{item}
 				</Menu.Item>
-		)) ?? [];
+			)) ?? [],
+		[versions],
+	);
 
-	const breadcrumbs = asPathWithoutQueryAndAnchor.split('/').map((path, idx, original) => (
+	const breadcrumbs = useMemo(
+		() =>
+			asPathWithoutQueryAndAnchor.split('/').map((path, idx, original) => (
 				<Link key={idx} href={original.slice(0, idx + 1).join('/')} passHref>
 					<Anchor component="a">{path}</Anchor>
 				</Link>
-	));
+			)),
+		[asPathWithoutQueryAndAnchor],
+	);
 
 	return (
 		<AppShell

packages/website/src/components/TableOfContentItems.tsx

@@ -1,4 +1,5 @@
 import { createStyles, Group, Text, Box, Stack, ThemeIcon, useMantineColorScheme } from '@mantine/core';
+import { useMemo } from 'react';
 import { VscListSelection, VscSymbolMethod, VscSymbolProperty } from 'react-icons/vsc';
 import type { ApiClassJSON, ApiInterfaceJSON } from '~/DocModel/ApiNodeJSONEncoder';
 
@@ -36,7 +37,9 @@ export function TableOfContentItems({
 	const { colorScheme } = useMantineColorScheme();
 	const { classes } = useStyles();
 
-	const propertyItems = properties.map((prop) => (
+	const propertyItems = useMemo(
+		() =>
+			properties.map((prop) => (
 				<Box<'a'> key={prop.name} href={`#${prop.name}`} component="a" className={classes.link}>
 					<Group>
 						<Text sx={{ textOverflow: 'ellipsis', overflow: 'hidden' }} className="line-clamp-1">
@@ -44,10 +47,16 @@ export function TableOfContentItems({
 						</Text>
 					</Group>
 				</Box>
-	));
+			)),
+		[properties],
+	);
 
-	const methodItems = methods.map((member) => {
+	const methodItems = useMemo(
-		const key = `${member.name}${member.overloadIndex && member.overloadIndex > 1 ? `:${member.overloadIndex}` : ''}`;
+		() =>
+			methods.map((member) => {
+				const key = `${member.name}${
+					member.overloadIndex && member.overloadIndex > 1 ? `:${member.overloadIndex}` : ''
+				}`;
 
 				return (
 					<Box<'a'> key={key} component="a" href={`#${key}`} className={classes.link}>
@@ -63,7 +72,9 @@ export function TableOfContentItems({
 						</Group>
 					</Box>
 				);
-	});
+			}),
+		[methods],
+	);
 
 	return (
 		<Box sx={{ wordBreak: 'break-all' }} pb="xl">

packages/website/src/components/tsdoc/TSDoc.tsx

@@ -1,7 +1,7 @@
 import { Anchor, Box, Code, Text, useMantineColorScheme } from '@mantine/core';
 import { DocNodeKind, StandardTags } from '@microsoft/tsdoc';
 import Link from 'next/link';
-import { Fragment, type ReactNode } from 'react';
+import { Fragment, useCallback, type ReactNode } from 'react';
 import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { vscDarkPlus, ghcolors } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import { BlockComment } from './BlockComment';
@@ -16,10 +16,11 @@ import type { DocCommentJSON } from '~/DocModel/comment/RootComment';
 export function TSDoc({ node }: { node: AnyDocNodeJSON }): JSX.Element {
 	const { colorScheme } = useMantineColorScheme();
 
+	const createNode = useCallback(
+		(node: AnyDocNodeJSON, idx?: number): ReactNode => {
 			let numberOfExamples = 0;
 			let exampleIndex = 0;
 
-	const createNode = (node: AnyDocNodeJSON, idx?: number): ReactNode => {
 			switch (node.kind) {
 				case DocNodeKind.PlainText:
 					return (
@@ -114,7 +115,9 @@ export function TSDoc({ node }: { node: AnyDocNodeJSON }): JSX.Element {
 			}
 
 			return null;
-	};
+		},
+		[colorScheme],
+	);
 
 	return (
 		<Box>