diff --git a/apps/client/src/widgets/ribbon/NotePathsTab.tsx b/apps/client/src/widgets/ribbon/NotePathsTab.tsx
index 29e85e452..da1a5c248 100644
--- a/apps/client/src/widgets/ribbon/NotePathsTab.tsx
+++ b/apps/client/src/widgets/ribbon/NotePathsTab.tsx
@@ -1,12 +1,13 @@
-import { TabContext } from "./ribbon-interface";
+import { useEffect, useMemo, useState } from "preact/hooks";
+
+import FNote, { NotePathRecord } from "../../entities/fnote";
 import { t } from "../../services/i18n";
+import { NOTE_PATH_TITLE_SEPARATOR } from "../../services/tree";
 import Button from "../react/Button";
 import { useTriliumEvent } from "../react/hooks";
-import { useEffect, useMemo, useState } from "preact/hooks";
-import FNote, { NotePathRecord } from "../../entities/fnote";
 import NoteLink from "../react/NoteLink";
 import { joinElements } from "../react/react_utils";
-import { NOTE_PATH_TITLE_SEPARATOR } from "../../services/tree";
+import { TabContext } from "./ribbon-interface";
 
 export default function NotePathsTab({ note, hoistedNoteId, notePath }: TabContext) {
     const sortedNotePaths = useSortedNotePaths(note, hoistedNoteId);
@@ -21,6 +22,7 @@ export default function NotePathsTab({ note, hoistedNoteId, notePath }: TabConte
                 <ul className="note-path-list">
                     {sortedNotePaths?.length ? sortedNotePaths.map(sortedNotePath => (
                         <NotePath
+                            key={sortedNotePath.notePath}
                             currentNotePath={notePath}
                             notePathRecord={sortedNotePath}
                         />
@@ -33,7 +35,7 @@ export default function NotePathsTab({ note, hoistedNoteId, notePath }: TabConte
                 />
             </>
         </div>
-    )
+    );
 }
 
 export function useSortedNotePaths(note: FNote | null | undefined, hoistedNoteId?: string) {
@@ -46,7 +48,7 @@ export function useSortedNotePaths(note: FNote | null | undefined, hoistedNoteId
             .filter((notePath) => !notePath.isHidden));
     }
 
-    useEffect(refresh, [ note?.noteId ]);
+    useEffect(refresh, [ note, hoistedNoteId ]);
     useTriliumEvent("entitiesReloaded", ({ loadResults }) => {
         const noteId = note?.noteId;
         if (!noteId) return;
@@ -60,8 +62,8 @@ export function useSortedNotePaths(note: FNote | null | undefined, hoistedNoteId
 }
 
 function NotePath({ currentNotePath, notePathRecord }: { currentNotePath?: string | null, notePathRecord?: NotePathRecord }) {
-    const notePath = notePathRecord?.notePath ?? [];
-    const notePathString = useMemo(() => notePath.join("/"), [ notePath ]);
+    const notePath = notePathRecord?.notePath;
+    const notePathString = useMemo(() => (notePath ?? []).join("/"), [ notePath ]);
 
     const [ classes, icons ] = useMemo(() => {
         const classes: string[] = [];
@@ -74,17 +76,17 @@ function NotePath({ currentNotePath, notePathRecord }: { currentNotePath?: strin
         if (!notePathRecord || notePathRecord.isInHoistedSubTree) {
             classes.push("path-in-hoisted-subtree");
         } else {
-            icons.push({ icon: "bx bx-trending-up", title: t("note_paths.outside_hoisted") })
+            icons.push({ icon: "bx bx-trending-up", title: t("note_paths.outside_hoisted") });
         }
 
         if (notePathRecord?.isArchived) {
             classes.push("path-archived");
-            icons.push({ icon: "bx bx-archive", title: t("note_paths.archived") })
+            icons.push({ icon: "bx bx-archive", title: t("note_paths.archived") });
         }
 
         if (notePathRecord?.isSearch) {
             classes.push("path-search");
-            icons.push({ icon: "bx bx-search", title: t("note_paths.search") })
+            icons.push({ icon: "bx bx-search", title: t("note_paths.search") });
         }
 
         return [ classes.join(" "), icons ];
@@ -93,7 +95,7 @@ function NotePath({ currentNotePath, notePathRecord }: { currentNotePath?: strin
     // Determine the full note path (for the links) of every component of the current note path.
     const pathSegments: string[] = [];
     const fullNotePaths: string[] = [];
-    for (const noteId of notePath) {
+    for (const noteId of notePath ?? []) {
         pathSegments.push(noteId);
         fullNotePaths.push(pathSegments.join("/"));
     }
@@ -101,12 +103,12 @@ function NotePath({ currentNotePath, notePathRecord }: { currentNotePath?: strin
     return (
         <li class={classes}>
             {joinElements(fullNotePaths.map(notePath => (
-                <NoteLink notePath={notePath} noPreview />
+                <NoteLink key={notePath} notePath={notePath} noPreview />
             )), NOTE_PATH_TITLE_SEPARATOR)}
 
             {icons.map(({ icon, title }) => (
-                <span class={icon} title={title} />
+                <span key={title} class={icon} title={title} />
             ))}
         </li>
-    )
+    );
 }