diff --git a/src/events/components/DetailView/PublicAttendeesModal/ParticipantsButton.tsx b/src/events/components/DetailView/PublicAttendeesModal/ParticipantsButton.tsx
index c2e9596d..9c25cde3 100644
--- a/src/events/components/DetailView/PublicAttendeesModal/ParticipantsButton.tsx
+++ b/src/events/components/DetailView/PublicAttendeesModal/ParticipantsButton.tsx
@@ -29,11 +29,16 @@ export const ParticipantsButton: FC<IProps> = ({ eventId, eventTitle }) => {
   const attendees = useSelector(selectPublicAttendeesForEventId(eventId));
   const [showModal, setShowModal] = useState(false);
 
-  const toggleModal = () => setShowModal(!showModal);
-
-  useEffect(() => {
-    dispatch(fetchPublicAttendeesByEventId(eventId));
-  }, [eventId]);
+  const toggleModal = () => {
+    if (!showModal) {
+      if (attendees.length === 0) {
+        dispatch(fetchPublicAttendeesByEventId(eventId));
+      }
+      setShowModal(true);
+    } else {
+      setShowModal(false);
+    }
+  };
 
   // disables background scrolling when the modal is open
   useEffect(() => {