From 1ee9b686a2de672364ad57f7e966b2db43bacfe3 Mon Sep 17 00:00:00 2001
From: Mike Johnston <mike@nervesocket.com>
Date: Thu, 29 Jan 2026 02:29:37 -0500
Subject: [PATCH] bugfix

---
 frontend/src/pages/ChallengeDetail.jsx | 62 +++++++++++++-------------
 1 file changed, 31 insertions(+), 31 deletions(-)

diff --git a/frontend/src/pages/ChallengeDetail.jsx b/frontend/src/pages/ChallengeDetail.jsx
index 5c965ec..948d1a8 100644
--- a/frontend/src/pages/ChallengeDetail.jsx
+++ b/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;