RangeError: Maximum call stack size exceeded at Object.ReactElement.js.ReactElement.createElement

I created a component that draws an image to an offscreen canvas, and then uses that Canvas as a fill for a rect.

While the concept works as epected, the whole resizing is really slow, and everytime I change the props rahmenWidth and rahmenHeight to rerender the component, I get an error in the console:

Exception from Tracker recompute function: meteor.js?hash=814eae5…:934 RangeError: Maximum call stack size exceeded at Array.sort (native) at Array.sort (http://localhost:3000/packages/es5-shim.js?hash=4187fffd3f43294b6953a57a6a17c24fbf2af5d2:1103:20) at Array.sort (http://localhost:3000/packages/modules.js?hash=4cc638933e14aa8b7182e66b68ccf143f043ce00:7605:15) at runBatchedUpdates (http://localhost:3000/packages/modules.js?hash=4cc638933e14aa8b7182e66b68ccf143f043ce00:142981:19) at ReactReconcileTransaction.perform (http://localhost:3000/packages/modules.js?hash=4cc638933e14aa8b7182e66b68ccf143f043ce00:144292:20) at ReactUpdatesFlushTransaction.perform (http://localhost:3000/packages/modules.js?hash=4cc638933e14aa8b7182e66b68ccf143f043ce00:144292:20) at ReactUpdatesFlushTransaction.perform (http://localhost:3000/packages/modules.js?hash=4cc638933e14aa8b7182e66b68ccf143f043ce00:142952:32) at flushBatchedUpdates (http://localhost:3000/packages/modules.js?hash=4cc638933e14aa8b7182e66b68ccf143f043ce00:143035:19) at ReactUpdatesFlushTransaction.close (http://localhost:3000/packages/modules.js?hash=4cc638933e14aa8b7182e66b68ccf143f043ce00:142910:7) at ReactUpdatesFlushTransaction.closeAll (http://localhost:3000/packages/modules.js?hash=4cc638933e14aa8b7182e66b68ccf143f043ce00:144358:25)

or the error

RangeError: Maximum call stack size exceeded at Object.ReactElement.js.ReactElement.createElement (modules.js?hash=4cc6389…:77631) at Object.createElement (modules.js?hash=4cc6389…:79615) at RectWithFill.render (mediaGallery.js:583) at modules.js?hash=4cc6389…:150941 at measureLifeCyclePerf (modules.js?hash=4cc6389…:150220) at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (modules.js?hash=4cc6389…:150940) at ReactCompositeComponentWrapper._renderValidatedComponent (modules.js?hash=4cc6389…:150967) at ReactCompositeComponentWrapper._updateRenderedComponent (modules.js?hash=4cc6389…:150891) at ReactCompositeComponentWrapper._performComponentUpdate (modules.js?hash=4cc6389…:150869) at ReactCompositeComponentWrapper.updateComponent (modules.js?hash=4cc6389…:150790)

I call it this way:

<RectWithFill imgsrc={this.props.featuredMedia.url()} x={0} y={0} size={100} width={this.props.rahmenWidth * 10} height={120} fillPatternOffsetX={0} />

and

<RectWithFill imgsrc={this.props.featuredMedia.url()} x={0} y={this.props.rahmenHeight * 10} scaleY={-1}  size={100} width={this.props.rahmenWidth * 10} height={120} fillPatternOffsetX={0} />

And this is the code:

class RectWithFill extends Component {
    state = {
      ctxfill: null,
      image: null,
    }

    componentDidMount() {
      let image = new window.Image();
      image.src = this.props.imgsrc;

      var offscreenCanvas = document.createElement('canvas');
        offscreenCanvas.width = 50;
        offscreenCanvas.height = 400;
      var context = offscreenCanvas.getContext('2d');

        image.onload = () => {
          context.drawImage(image, -350, 0);
      }

      this.setState({
        ctxfill: offscreenCanvas,
        image: image
      });
    }

    componentDidUpdate() {
      let image = this.state.image;
      image.src = this.props.imgsrc;

      var offscreenCanvas = this.state.ctxfill;
      var context = offscreenCanvas.getContext('2d');

        image.onload = () => {
          context.drawImage(image, -350, 0);
        }

      this.setState({
        ctxfill: offscreenCanvas,
        image: image
      });
    }
    render() {
        return (
            <Rect width={this.props.width} height={this.props.height} scaleY={this.props.scaleY} scaleX={this.props.scaleX} rotation={this.props.rotation} x={this.props.x} y={this.props.y} fillPatternImage={this.state.ctxfill} fillPatternRepeat={"repeat"} fillPatternScaleX={0.3} fillPatternScaleY={0.3} fillPatternOffsetX={this.props.fillPatternOffsetX} fillPatternOffsetY={this.props.fillPatternOffsetY}  />
        );
    }
}

[lavrton]

I think the correct way will be:

componentDidUpdate(oldProps) {
     if (oldProps.imgsrc !== this.props.imgsrc) {
       let image = this.state.image;
       image.src = this.props.imgsrc;

       var offscreenCanvas = this.state.ctxfill;
       var context = offscreenCanvas.getContext('2d');

       image.onload = () => {
          context.drawImage(image, -350, 0);
       }

        this.setState({
          ctxfill: offscreenCanvas,
          image: image
        });
      }
}

[janus-reith]

I replaced

this.setState({
        ctxfill: offscreenCanvas,
        image: image
 });

with

if (offscreenCanvas !== this.state.ctxfill) {
      this.setState({
        ctxfill: offscreenCanvas
      });
      }

      if (image !== this.state.image) {
      this.setState({
        image: image
      });
      }

Hope this is the proper way to do this. Way smoother now and the errorr are gone, thank you for the help. Closing this now.