From 16a9caa555a2d63b7ff8af0731fbfd3231d6225c Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Mon, 16 Sep 2024 01:05:17 +0000
Subject: [PATCH] perf: eagerly compute explorer nodes to avoid re-render in memoized value
---
quartz/components/ExplorerNode.tsx | 27 ++++++++-------------------
1 files changed, 8 insertions(+), 19 deletions(-)
diff --git a/quartz/components/ExplorerNode.tsx b/quartz/components/ExplorerNode.tsx
index 60966b3..3137a3f 100644
--- a/quartz/components/ExplorerNode.tsx
+++ b/quartz/components/ExplorerNode.tsx
@@ -12,7 +12,7 @@
type OrderEntries = "sort" | "filter" | "map"
export interface Options {
- title: string
+ title?: string
folderDefaultState: "collapsed" | "open"
folderClickBehavior: "collapse" | "link"
useSavedState: boolean
@@ -168,10 +168,8 @@
const isDefaultOpen = opts.folderDefaultState === "open"
// Calculate current folderPath
- let folderPath = ""
- if (node.name !== "") {
- folderPath = joinSegments(fullPath ?? "", node.name)
- }
+ const folderPath = node.name !== "" ? joinSegments(fullPath ?? "", node.name) : ""
+ const href = resolveRelative(fileData.slug!, folderPath as SimpleSlug) + "/"
return (
<>
@@ -205,11 +203,7 @@
{/* render <a> tag if folderBehavior is "link", otherwise render <button> with collapse click event */}
<div key={node.name} data-folderpath={folderPath}>
{folderBehavior === "link" ? (
- <a
- href={resolveRelative(fileData.slug!, folderPath as SimpleSlug)}
- data-for={node.name}
- class="folder-title"
- >
+ <a href={href} data-for={node.name} class="folder-title">
{node.displayName}
</a>
) : (
@@ -230,15 +224,10 @@
class="content"
data-folderul={folderPath}
>
- {node.children.map((childNode, i) => (
- <ExplorerNode
- node={childNode}
- key={i}
- opts={opts}
- fullPath={folderPath}
- fileData={fileData}
- />
- ))}
+ {node.children.map((childNode) =>
+ // eagerly render children so we can memoize properly
+ ExplorerNode({ node: childNode, opts, fileData, fullPath: folderPath }),
+ )}
</ul>
</div>
</li>
--
Gitblit v1.10.0