onCropComplete is firing on window resize

[gregg-cbs]

Describe the bug If you resize the window, onCropComplete fires.

To Reproduce Steps to reproduce the behavior:

1. Go to this codesandbox
2. Put a console log in the the onCropComplete
3. Resize the window
4. Notice console logs with what seems like with no debounce

Expected behavior Not expecting onCropComplete to fire on window resize.. i understand why this might be in place for responsive reasons. But if it is a required feature I would expect the window resize to be debounced.

[ValentinH]

Having this callback fired is mandatory as the crop data is dependent on the window size. However, you have a good point regarding deboucing. We should add a debounce here.

Would you like to do a PR?

[gregg-cbs]

Sure I can do that. Do you mind if I use the debounce package?

[ValentinH]

No it's fine as it's small enough 🙂

[gregg-cbs]

Great will find some time in the next day or so and comment the PR here.

[gregg-cbs]

Looks like window resize uses the computeSizes method

  componentDidMount() {
    window.addEventListener('resize', this.computeSizes)
 }

  computeSizes = () => {
    const mediaRef = this.imageRef || this.videoRef
    ...
  }

If i debounce the resize I will have to pass the same debounced function into removeEventListener.

Would it be safe or okay to debounce the computeSizes method so that recalculations are never running wild:

  computeSizes = debounce(() => {
    const mediaRef = this.imageRef || this.videoRef
    ...
  }, 200)

or wrap it just for the resize

  debouncedComputeSizes = debounce(this.computeSizes, 200)

  componentDidMount() {
    window.addEventListener('resize', this.debouncedComputeSizes)
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.debouncedComputeSizes)
 }

[ValentinH]

Indeed, it's better to only do the debounce for the resize event. computeSizes is used in multiple places and in some it has to be done immediately.