How to call dispatch function in same useEffect in order to avoid Maximum update depth exceeded

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?