State change does not effect React DOM - reactjs

Question

I am using React Material UI. For loading purposes, I decided to use Skeleton structure. However, state change does not effect skeleton component's width and height so that it does not work properly.
export default function ComplexGrid(props) {
const [hover, setHover] = useState(false);
const [article, setArticle] = useState("");
const [year, setYear] = useState("");
const [month, setMonth] = useState("");
const [loaded, setLoaded] = useState(false);
const [width, setWidth] = useState(null);
const [height, setHeight] = useState(null);
const skeletonStructure = useRef(null);
const classes = useStyles();
useEffect(() => {
if (props.mainNew[0]) {
setArticle(props.mainNew[0]);
setYear(String(article.updated_at).split("-")[0]);
setMonth(String(article.updated_at).split("-")[1]);
}
if (skeletonStructure.current) {
setWidth(skeletonStructure.current.offsetWidth);
setHeight(skeletonStructure.current.offsetHeight);
}
setTimeout(() => {
setLoaded(true);
}, 500);
});
const stylehvr = loaded && hover && article ? { cursor: "pointer", opacity: "60%", transition: "all 0.5s linear" } : {};
const hoverbck = loaded && hover && article ? { backgroundColor: "black", cursor: "pointer" } : {};
return (
<div className={classes.root} onMouseOver={() => setHover(true)} onMouseOut={() => setHover(false)}>
<Grid container spacing={2} className={classes.grd}>
<div style={hoverbck}>
{article && loaded ? (
<img ref={skeletonStructure} className={classes.img} style={stylehvr} alt={article.title} src={article.img1} />
) : (
<Skeleton variant="rect" width={width} height={height} animation="pulse" />
)}
{article && loaded ? (
<Typography gutterBottom variant="subtitle1" className={classes.title}>
{article.title} - {width} - {height}
</Typography>
) : (
""
)}
{article && loaded ? (
<Typography variant="body2" color="textSecondary" className={classes.date}>
{month} / {year}
</Typography>
) : (
""
)}
{article && loaded ? (
<Typography variant="body2" color="textSecondary" className={classes.timer}>
{article.read_time} Dakikalık Okuma
</Typography>
) : (
""
)}
{article && loaded ? (
<Typography variant="body2" className={classes.type}>
{article.content_type}
</Typography>
) : (
""
)}
</div>
</Grid>
</div>
);
}
Since initial state of height and weight are 'null', skeleton does not work as intended, nevertheless weight and height are correctly set in useEffect. How to use correct state for skeleton component?

Answer 1

Try setting all your states as dependency in the useEffect hooks
useEffect(() => {//your code}, [//all states here])

Answer 2

To give dependency to UseEffect You need to give it like this.
useEffect(() => {
//your code which should be executed when dependent state updates.
}, [state names])
//UPDATED
useEffect(() => {
if(props.mainNew[0]){
setArticle(props.mainNew[0])
setYear(String(article.updated_at).split("-")[0])
setMonth(String(article.updated_at).split("-")[1])
}
if(skeletonStructure.current){
setWidth(skeletonStructure.current.offsetWidth)
setHeight(skeletonStructure.current.offsetHeight)
}
setTimeout(() => {
setLoaded(true)
}, 500)
},[skeletonStructure.current,props.mainNew[0]])
if you don't provide dependent states within [] then it will not be rendered again when state update occurs. and if you provide [] empty then use-effect will be called once only.