feat: optimize stats dashboard data and components

stats/src/hooks/useWordDetail.ts

@@ -8,14 +8,34 @@ export function useWordDetail(wordId: number | null) {
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
-    if (wordId === null) return;
+    let cancelled = false;
+    if (wordId === null) {
+      setData(null);
+      setLoading(false);
+      setError(null);
+      return () => {
+        cancelled = true;
+      };
+    }
     setLoading(true);
     setError(null);
     getStatsClient()
       .getWordDetail(wordId)
-      .then(setData)
-      .catch((err: Error) => setError(err.message))
-      .finally(() => setLoading(false));
+      .then((next) => {
+        if (cancelled) return;
+        setData(next);
+      })
+      .catch((err: Error) => {
+        if (cancelled) return;
+        setError(err.message);
+      })
+      .finally(() => {
+        if (cancelled) return;
+        setLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
   }, [wordId]);
 
   return { data, loading, error };