Reactjs too many re-renders warning

I’m new on reactjs and ı have a card project. I want the desired card to be opened when the day comes. My code has no problem but ı have a console warn like too many re-renders. How can ı fix that?

PS: I know, thats a bad code but ı’m trying to improve myself 🙂

const d = new Date();
    const gunler = [      //this means days in turkish like monday, tuesday etc.
      "Pazartesi",
      "Salı",
      "Çarşamba",
      "Perşembe",
      "Cuma",
      "Cumartesi",
      "Pazar",
  ];
  const bugun = gunler[(d.getUTCDay() + 6) % 7];
  const [isPazartesi, setPazartesi] = useState(false);
  const [isSalı, setSalı] = useState(false);
  const [isÇarşamba, setÇarşamba] = useState(false);
  const [isPerşembe, setPerşembe] = useState(false);
  const [isCuma, setCuma] = useState(false);
  const [isCumartesi, setCumartesi] = useState(false);
  const [isPazar, setPazar] = useState(false);

  const updateStatesBasedOnDay = (day) => {
    if (day === gunler[0]) {
      setPazartesi(true);
    }
    if (day === gunler[1]) {
      setPazartesi(true);
      setSalı(true);
    }
    if (day === gunler[2]) {
      setPazartesi(true);
      setSalı(true);
      setÇarşamba(true);
    }
    if (day === gunler[3]) {
      setPazartesi(true);
      setSalı(true);
      setÇarşamba(true);
      setPerşembe(true);
    }
    if (day === gunler[4]) {
      setPazartesi(true);
      setSalı(true);
      setÇarşamba(true);
      setPerşembe(true);
      setCuma(true);
    }
    if (day === gunler[5]) {
      setPazartesi(true);
      setSalı(true);
      setÇarşamba(true);
      setPerşembe(true);
      setCuma(true);
      setCumartesi(true);
    }
    if (day === gunler[6]) {
      setPazartesi(true);
      setSalı(true);
      setÇarşamba(true);
      setPerşembe(true);
      setCuma(true);
      setCumartesi(true);
      setPazar(true);
    }
  }
  updateStatesBasedOnDay(bugun);
  return (... //Thers 7 card component and each card will unlock one day. each component has js codes like ${isPazartesi ? "" : "transform-none"});

>Solution :

UseEffect will help you with your renders

  useEffect(() => {
    const updateStatesBasedOnDay = (day) => {
      if (day === gunler[0]) {
        setPazartesi(true);
      }
      if (day === gunler[1]) {
        setPazartesi(true);
        setSalı(true);
      }
      if (day === gunler[2]) {
        setPazartesi(true);
        setSalı(true);
        setÇarşamba(true);
      }
      if (day === gunler[3]) {
        setPazartesi(true);
        setSalı(true);
        setÇarşamba(true);
        setPerşembe(true);
      }
      if (day === gunler[4]) {
        setPazartesi(true);
        setSalı(true);
        setÇarşamba(true);
        setPerşembe(true);
        setCuma(true);
      }
      if (day === gunler[5]) {
        setPazartesi(true);
        setSalı(true);
        setÇarşamba(true);
        setPerşembe(true);
        setCuma(true);
        setCumartesi(true);
      }
      if (day === gunler[6]) {
        setPazartesi(true);
        setSalı(true);
        setÇarşamba(true);
        setPerşembe(true);
        setCuma(true);
        setCumartesi(true);
        setPazar(true);
      }
    };

    updateStatesBasedOnDay(bugun);
  }, [bugun]);

Here, it runs the updateStatesBasedOnDay function only once when the component mounts.