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 | 37 +++++++++++++------------------------
1 files changed, 13 insertions(+), 24 deletions(-)
diff --git a/quartz/components/ExplorerNode.tsx b/quartz/components/ExplorerNode.tsx
index 118f25b..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,13 +168,11 @@
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 (
- <li>
+ <>
{node.file ? (
// Single file node
<li key={node.file.slug}>
@@ -183,7 +181,7 @@
</a>
</li>
) : (
- <div>
+ <li>
{node.name !== "" && (
// Node with entire folder
// Render svg button + folder name, then children
@@ -205,16 +203,12 @@
{/* 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>
) : (
<button class="folder-button">
- <p class="folder-title">{node.displayName}</p>
+ <span class="folder-title">{node.displayName}</span>
</button>
)}
</div>
@@ -230,19 +224,14 @@
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>
- </div>
+ </li>
)}
- </li>
+ </>
)
}
--
Gitblit v1.10.0