diff --git a/apps/web/src/routes/_app/notes.tsx b/apps/web/src/routes/_app/notes.tsx
index c5cada9..1bd6099 100644
--- a/apps/web/src/routes/_app/notes.tsx
+++ b/apps/web/src/routes/_app/notes.tsx
@@ -149,7 +149,7 @@ const NoteEditorPane = memo(function NoteEditorPane({ note, onDelete }: { note:
 function NotesPage() {
   const queryClient = useQueryClient();
   const [search, setSearch] = useState("");
-  const [selectedNoteId, setSelectedNoteId] = useState<string | null>(null);
+  const selectedNoteIdRef = useRef<string | null>(null);
   const selectedNoteRef = useRef<Note | null>(null);
 
   useRealtime({ enabled: true });
@@ -166,7 +166,7 @@ function NotesPage() {
     onSuccess: (note) => {
       queryClient.invalidateQueries({ queryKey: ["notes"] });
       selectedNoteRef.current = note;
-      setSelectedNoteId(note.id);
+      selectedNoteIdRef.current = note.id;
     },
   });
 
@@ -175,7 +175,7 @@ function NotesPage() {
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["notes"] });
       selectedNoteRef.current = null;
-      setSelectedNoteId(null);
+      selectedNoteIdRef.current = null;
     },
   });
 
@@ -186,7 +186,7 @@ function NotesPage() {
     } catch {
       selectedNoteRef.current = note;
     }
-    setSelectedNoteId(note.id);
+    selectedNoteIdRef.current = note.id;
   };
 
   const selectedNote = selectedNoteRef.current;
@@ -219,7 +219,7 @@ function NotesPage() {
                   onClick={() => selectNote(note)}
                   className={cn(
                     "w-full text-left px-3 py-2 rounded-md text-sm transition-colors",
-                    selectedNoteId === note.id ? "bg-accent text-accent-foreground" : "hover:bg-accent/50"
+                    selectedNoteIdRef.current === note.id ? "bg-accent text-accent-foreground" : "hover:bg-accent/50"
                   )}
                 >
                   <div className="flex items-center gap-2">