I have component that looks like this
const TrainingProgressBar = ({ id }) => {
const { classes } = useStyles();
const dispatch = useDispatch();
const { success } = useSelector(state => state.app.contents).statusById[id];
const content = useSelector(state => selectContent(state, { id }));
const { notStarted, started, completed } = content.trainingProgress || {};
const refic = useRef();
useEffect(() => {
if (success || JSON.stringify(refic.current) !== JSON.stringify(content)) {
dispatch(getContent({
id,
query: {
calculateTrainingProgress: true,
management: true
}
}));
refic.current = content;
}
}, [dispatch, id, success, content]);
const total = notStarted + started + completed;
const totalPercentage = Math.round((completed / total) * 100) || 0;
return (
<>
some code
</>
);
};
Where content
depends on the ID that is passed to this component. I’m trying to achieve that dispatch
is called when content
is loaded, success
is true, and content
is changed. In the second case, success
is not changed. The problem I have is that the Maximum update depth is exceeded. It’s caused by content
in the dependency array, but if I don’t put it in there, dispatch
will not be called if the content
is changed. What am I doing wrong?