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