diff --git a/src/app/hooks/useAccountData.js b/src/app/hooks/useAccountData.js
deleted file mode 100644
index 43cc11ed..00000000
--- a/src/app/hooks/useAccountData.js
+++ /dev/null
@@ -1,21 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-import { useState, useEffect } from 'react';
-import { useMatrixClient } from './useMatrixClient';
-
-export function useAccountData(eventType) {
-  const mx = useMatrixClient();
-  const [event, setEvent] = useState(mx.getAccountData(eventType));
-
-  useEffect(() => {
-    const handleChange = (mEvent) => {
-      if (mEvent.getType() !== eventType) return;
-      setEvent(mEvent);
-    };
-    mx.on('accountData', handleChange);
-    return () => {
-      mx.removeListener('accountData', handleChange);
-    };
-  }, [mx, eventType]);
-
-  return event;
-}
diff --git a/src/app/hooks/useAccountData.ts b/src/app/hooks/useAccountData.ts
new file mode 100644
index 00000000..30e47b47
--- /dev/null
+++ b/src/app/hooks/useAccountData.ts
@@ -0,0 +1,22 @@
+import { useState, useCallback } from 'react';
+import { useMatrixClient } from './useMatrixClient';
+import { useAccountDataCallback } from './useAccountDataCallback';
+
+export function useAccountData(eventType: string) {
+  const mx = useMatrixClient();
+  const [event, setEvent] = useState(() => mx.getAccountData(eventType));
+
+  useAccountDataCallback(
+    mx,
+    useCallback(
+      (evt) => {
+        if (evt.getType() === eventType) {
+          setEvent(evt);
+        }
+      },
+      [eventType, setEvent]
+    )
+  );
+
+  return event;
+}