bugfix

frontend/src/pages/ChallengeDetail.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { useParams, Link } from 'react-router-dom';
 import toast from 'react-hot-toast';
 import { useAuth } from '../AuthContext';
@@ -25,11 +25,40 @@ export default function ChallengeDetail() {
 
   useClickOutside(searchRef, () => setSearchResults([]));
 
+  const loadChallenge = useCallback(async () => {
+    try {
+      const data = await api.getChallenge(id);
+      setChallenge(data);
+    } catch (err) {
+      console.error('Failed to load challenge:', err);
+    } finally {
+      setLoading(false);
+    }
+  }, [id]);
+
+  const loadPredictions = useCallback(async () => {
+    try {
+      const data = await api.getPredictions(id);
+      setPredictions(data.predictions);
+    } catch (err) {
+      console.error('Failed to load predictions:', err);
+    }
+  }, [id]);
+
+  const loadLeaderboard = useCallback(async () => {
+    try {
+      const data = await api.getChallengeLeaderboard(id);
+      setLeaderboard(data.leaderboard);
+    } catch (err) {
+      console.error('Failed to load leaderboard:', err);
+    }
+  }, [id]);
+
   useEffect(() => {
     loadChallenge();
     loadPredictions();
     loadLeaderboard();
-  }, [id]);
+  }, [loadChallenge, loadPredictions, loadLeaderboard]);
 
   // Join challenge room for real-time updates
   useEffect(() => {
@@ -99,35 +128,6 @@ export default function ChallengeDetail() {
     };
   }, [socket, user.id, loadLeaderboard, loadChallenge]);
 
-  const loadChallenge = async () => {
-    try {
-      const data = await api.getChallenge(id);
-      setChallenge(data);
-    } catch (err) {
-      console.error('Failed to load challenge:', err);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const loadPredictions = async () => {
-    try {
-      const data = await api.getPredictions(id);
-      setPredictions(data.predictions);
-    } catch (err) {
-      console.error('Failed to load predictions:', err);
-    }
-  };
-
-  const loadLeaderboard = async () => {
-    try {
-      const data = await api.getChallengeLeaderboard(id);
-      setLeaderboard(data.leaderboard);
-    } catch (err) {
-      console.error('Failed to load leaderboard:', err);
-    }
-  };
-
   const handleCreatePrediction = async (e) => {
     e.preventDefault();
     if (!newPrediction.trim()) return;