React code keeps rerendering after changing state

November 15, 2021

this code keeps rerendering the page on every state change and when I add an image it keeps
rerendering infinitely without errors

const [adData, setAdData] = useState({
    name: "",
    link: "",
    fromDate: {},
    toDate: {},
    fromTime: {},
    toTime: {},
    iconEn: null,
    allViews: 0,
    userViews: 0,
  });
  const [iconEN, setIconEN] = useState(null);
  const [currentEnImg, setCurrentEnImg] = useState(null);
  const handleOnChange = (e) => {
    setAdData({ ...adData, [e.target.name]: e.target.value });
  };
  const handleOnCheck = (e) => {
    setAdData({ ...adData, [e.target.name]: e.target.checked});
  };
  if (iconEN) {
    const reader = new FileReader();
    reader.onload = () => {
      setCurrentEnImg(reader.result);
      setAdData({ ...adData, iconEn: iconEN });
    };
    reader.readAsDataURL(iconEN);
  }

what am I doing wrong and how to fix it.

>Solution :

Issue is here:

if (iconEN) {
    const reader = new FileReader();
    reader.onload = () => {
      setCurrentEnImg(reader.result);
      setAdData({ ...adData, iconEn: iconEN });
    };
    reader.readAsDataURL(iconEN);
  }

every state set function re-render the application and on every re-render the same state set function is called that makes this process as a never ending loop.

Solution: try useEffect hook with a proper dependency variable or [] and this problem will be solved.

In your case put your login inside useEffect like:

useEffect(() => {
     if (iconEN) {
        const reader = new FileReader();
        reader.onload = () => {
          setCurrentEnImg(reader.result);
          setAdData({ ...adData, iconEn: iconEN });
        };
        reader.readAsDataURL(iconEN);
      }
}, []);