Maximum update depth Exceeded during React Easy Crop

Question

I am trying to get the react-easy-crop library working following this guy's tutorial: https://www.youtube.com/watch?v=RmiP1AY5HFM

However, around the middle of his video, he is able to show his image after selecting the file. In my code, I can see the image for 0.5 seconds, and it disappears because React Crashes with the log: "Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops."

I know there's an infinite loop somewhere but I cannot figure out where...I'm quite new to react.. please help!

    const inputRef = React.useRef();
    const triggerFileSelectPopup = () => inputRef.current.click();
    const [image, setImage] = useState(null);
    const [croppedArea, setCroppedArea] = useState(null);
    const [crop, setCrop] = useState({x:0, y:0});
    const [zoom, setZoom] = useState(1)

    const onCropComplete = () => {}

    const onSelectFile = (event) => {
        if (event.target.files && event.target.files.length > 0) {
            const reader = new FileReader()
            reader.readAsDataURL(event.target.files[0])
            reader.addEventListener('load', ()=> {
                console.log(reader.result);
                setImage(reader.result);
            });
        }
    };

    const CropContainer = () => {
        return (
            
                
                    
                    
                
                
                    

                    

                    
                
            

        );
    }
 
    return (
       
             
       
    );

user_8690857 · Answer

It seems likely that something the nested CropContainer component does causes the outer component to rerender. When the outer component rerenders, it declares a new CropContainer component, which unmounts the previous "instance" and mounts a new one. This is why it is considered anti-pattern to define React components within other react components.

You can either move the JSX that CropContainer returns, as you've done

or you can move the CropContainer declaration outside the outer component. Pass all the callbacks and such in as props.

const CropContainer = ({
  crop,
  image,
  inputRef,
  onCropChange,
  onCropComplete,
  onSelectFile,
  setCrop,
  setZoom,
  triggerFileSelectPopup,
  zoom
}) => {
  return (
    
      
        
        
      
      
        

        

        
      
    
  );
};

...

return (
  
      
  
);

user_14548500 · Answer

i had this problem myself, when i was opening the modal to crop the image i was getting infinite console.log from onCropComplete, because i was using an image saved in redux state i had to put the image inside a normal state first then put the image into Cropper

const IMG = useSelector((state: RootStateOrAny) => state.create.photoRaw)

const [image, setImage] = useState(URL.createObjectURL(IMG))
const [crop, setCrop] = useState({ x: 0, y: 0 });
const [zoom, setZoom] = useState(1);

const onCropComplete = useCallback(
    (croppedArea: Area, croppedAreaPixels: Area) => {
        console.log(croppedArea, croppedAreaPixels);
}, []);

Maximum update depth Exceeded during React Easy Crop

2 Answers