refactor: use useMemo instead if useEffect

Author: mhenriette

src/components/badges/index.tsx

@@ -1,6 +1,6 @@
 import Tag from "@/components/ui/Tag";
 import { Challenge } from "@/types/course";
-import { useEffect, useState } from "react";
+import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 
 /**
@@ -19,20 +19,16 @@ interface BadgeProps {
 }
 export default function Badges({ challenge, className, courseLevel }: BadgeProps) {
   const { t } = useTranslation();
-  const [challengeLevel, setChallengeLevel] = useState("");
 
-  const level = challenge?.level || courseLevel;
-
-  useEffect(() => {
-    if (level === 0 || level === 1) return setChallengeLevel("course.challenge.level-0");
-    return setChallengeLevel("course.challenge.level-2");
-  }, [level]);
+  const level = useMemo(() => {
+    const value = challenge?.level || courseLevel;
+    return (value === 0 || value === 1) ? "course.challenge.level-0" : "course.challenge.level-2";
+  }, [challenge?.level, courseLevel]);
 
   if (!level && !challenge?.isTeamChallenge) return <></>;
-
   return (
     <div className={`uppercase flex flex-wrap gap-2 mb-3 ${className}`}>
-      {level && <Tag>{t(challengeLevel)}</Tag>}
+      {level && <Tag>{t(level)}</Tag>}
       {challenge?.isTeamChallenge && <Tag type="light">{challenge?.isHackathon ? "Hackathon" : "Team"} challenge</Tag>}
     </div>
   );