diff --git a/apps/client/composables/learnRecord.ts b/apps/client/composables/learnRecord.ts
index 0ca356631..89d92204a 100644
--- a/apps/client/composables/learnRecord.ts
+++ b/apps/client/composables/learnRecord.ts
@@ -1,23 +1,31 @@
 import type { MaybeRef } from "vue";
 
-import { ref, toValue, watchEffect } from "vue";
+import { refDebounced } from "@vueuse/core";
+import { ref, toValue, watch } from "vue";
 
 import type { UserLearnRecordResponse } from "~/api/userLearnRecord";
 import { fetchLearnRecord } from "~/api/userLearnRecord";
+import { useUserStore } from "~/store/user";
 
 interface UseLearnRecordOptions {
   year?: MaybeRef<number>;
-  userId: string;
+  /**
+   * @default string current user
+   */
+  userId?: string;
 }
 
 export function useLearnRecord(options: UseLearnRecordOptions) {
-  const { userId } = options || {};
+  const userStore = useUserStore();
+  const { userId = userStore.userInfo?.sub! } = options || {};
+
   const learnRecord = ref<UserLearnRecordResponse>({
     list: [],
     totalCount: 0,
   });
 
   const year = ref(options?.year || new Date().getFullYear());
+  const debouncedYear = refDebounced(year, 1500);
 
   function getQuery() {
     const yearStr = toValue(year);
@@ -32,9 +40,15 @@ export function useLearnRecord(options: UseLearnRecordOptions) {
     const res = await fetchLearnRecord(getQuery());
     learnRecord.value = res;
   }
-  watchEffect(() => {
-    updateLearnRecord();
-  });
+  watch(
+    debouncedYear,
+    () => {
+      updateLearnRecord();
+    },
+    {
+      immediate: true,
+    },
+  );
 
   return {
     year,