diff --git a/apps/app/package.json b/apps/app/package.json
index d4c87d2..76d3295 100644
--- a/apps/app/package.json
+++ b/apps/app/package.json
@@ -51,6 +51,7 @@
     "react-native-screens": "3.31.1",
     "react-native-svg": "15.2.0",
     "react-native-web": "~0.19.10",
+    "react-yjs": "^0.0.3",
     "secsync": "^0.5.0",
     "secsync-react-yjs": "^0.5.0",
     "tailwind-merge": "^2.3.0",
diff --git a/apps/app/src/components/document.tsx b/apps/app/src/components/document.tsx
index 62668da..5eafa65 100644
--- a/apps/app/src/components/document.tsx
+++ b/apps/app/src/components/document.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useRef, useState } from "react";
 import { View } from "react-native";
 import sodium, { KeyPair } from "react-native-libsodium";
+import { useY } from "react-yjs";
 import { generateId } from "secsync";
 import { useYjsSync } from "secsync-react-yjs";
 import * as Yjs from "yjs";
@@ -12,7 +13,6 @@ import { Checkbox } from "../components/checkbox";
 import { DocumentMembers } from "../components/documentMember";
 import { SubtleInput } from "../components/subtleInput";
 import { UpdateDocumentNameForm } from "../components/updateDocumentNameForm";
-import { useYData } from "../hooks/useYData";
 import { convertChecklistToArrayAndSort } from "../utils/convertChecklistToArrayAndSort";
 import { deserialize } from "../utils/deserialize";
 import { getDocumentStorage } from "../utils/documentStorage";
@@ -72,7 +72,7 @@ const Document: React.FC<Props> = ({ documentKey, documentId }) => {
   }, []);
 
   const yDocument: Yjs.Map<Yjs.Map<any>> = yDocRef.current.getMap("document");
-  const document = useYData<{ [k: string]: ChecklistItem }>(yDocument);
+  const document = useY(yDocument);
   const checklist = document ? convertChecklistToArrayAndSort(document) : [];
   const [newTodoText, setNewTodoText] = useState("");
 
diff --git a/apps/app/src/hooks/useYArray.ts b/apps/app/src/hooks/useYArray.ts
deleted file mode 100644
index 47447ac..0000000
--- a/apps/app/src/hooks/useYArray.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { useRef, useSyncExternalStore } from "react";
-import * as Yjs from "yjs";
-
-export const useYArray = (yArray: Yjs.Array<string>) => {
-  const cachedMyListRef = useRef<string[]>([]);
-  const array = useSyncExternalStore(
-    (callback) => {
-      yArray.observe(callback);
-      return () => yArray.unobserve(callback);
-    },
-    () => {
-      // React requires reference equality
-      const newList = yArray.toArray();
-      if (JSON.stringify(cachedMyListRef.current) === JSON.stringify(newList)) {
-        return cachedMyListRef.current;
-      } else {
-        cachedMyListRef.current = newList;
-        return cachedMyListRef.current;
-      }
-    },
-    () => []
-  );
-  return array;
-};
diff --git a/apps/app/src/hooks/useYData.ts b/apps/app/src/hooks/useYData.ts
deleted file mode 100644
index 972a3db..0000000
--- a/apps/app/src/hooks/useYData.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { useRef, useSyncExternalStore } from "react";
-import * as Yjs from "yjs";
-
-export function useYData<Type>(yData: Yjs.Map<any>) {
-  const cachedDataRef = useRef<Type | null>(null);
-  const array = useSyncExternalStore(
-    (callback) => {
-      yData.observeDeep(callback);
-      return () => yData.unobserveDeep(callback);
-    },
-    () => {
-      // React requires reference equality
-      const newStructure = yData.toJSON() as Type;
-      if (
-        JSON.stringify(cachedDataRef.current) === JSON.stringify(newStructure)
-      ) {
-        return cachedDataRef.current;
-      } else {
-        cachedDataRef.current = newStructure;
-        return cachedDataRef.current;
-      }
-    },
-    () => null
-  );
-  return array;
-}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b779772..615aa60 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -149,6 +149,9 @@ importers:
       react-native-web:
         specifier: ~0.19.10
         version: 0.19.12(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      react-yjs:
+        specifier: ^0.0.3
+        version: 0.0.3(react@18.2.0)(yjs@13.6.18)
       secsync:
         specifier: ^0.5.0
         version: 0.5.0
@@ -5261,6 +5264,12 @@ packages:
     peerDependencies:
       react: ^18.2.0
 
+  react-yjs@0.0.3:
+    resolution: {integrity: sha512-8HYkqb6jliEX2fZW9hHm6tOyAden8y3TVwmxvGTvNfrHQ+j9SgIj/S25mVn4aoja4KP6ZZz13yVt203dzCNxhg==}
+    peerDependencies:
+      react: ^18 || ^19
+      yjs: ^13.6.16
+
   react@18.2.0:
     resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
     engines: {node: '>=0.10.0'}
@@ -12709,6 +12718,11 @@ snapshots:
       react-shallow-renderer: 16.15.0(react@18.2.0)
       scheduler: 0.23.2
 
+  react-yjs@0.0.3(react@18.2.0)(yjs@13.6.18):
+    dependencies:
+      react: 18.2.0
+      yjs: 13.6.18
+
   react@18.2.0:
     dependencies:
       loose-envify: 1.4.0