React code keeps rerendering after changing state

Question

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.

Mayank Pandeyz · Accepted Answer · 2021-11-15 07:24:40Z

2

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);
      }
}, []);

answered Nov 15, 2021 at 7:24

Mayank Pandeyz

26.3k4 gold badges43 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

divyraj · Accepted Answer · 2021-11-15 07:20:12Z

2

you can just add useEffects hook when page load

useEffect(()=>{
  /*
  Query logic
  */
  console.log('i fire once');},[]);

in this hook call your that function which call when entering the page after use, this code does not render every time when change state it might help

answered Nov 15, 2021 at 7:20

divyraj

1932 silver badges15 bronze badges

Collectives™ on Stack Overflow

React code keeps rerendering after changing state

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related