`draw.rectangle` equality check in `componentDidUpdate` broken

    if (isEqual(this.props.draw, prevProps.draw) || this.props.position !== prevProps.position) {
      return false;
    }

If draw is set to something, this equality check will fail causing re-rendering every time there is an update.

$ prevProps.draw
rectangle: shapeOptions: clickable: truecolor: "#3388ff"fill: truefillColor: nullfillOpacity: 0.2opacity: 0.5showArea: truestroke: trueweight: 4__proto__: Object__proto__: Object__proto__: Object

$ this.props.draw
rectangle: shapeOptions: {clickable: true}__proto__: Object__proto__: Object

The issue is in updateDrawControls. Looks like a reference to this.props.draw is being passed directly to options.draw which is then mutated by leaflet-draw.

Props should be immutable.

this.props.draw should be cloned before passing to options.draw
There should be a mechanism to retrieve the mutated options from leaflet-draw...similarly to how react-leaflet handles the viewport. See https://github.com/PaulLeCam/react-leaflet/blob/master/docs/Components.md#map

  updateDrawControls = () => {
    const { layerContainer } = this.context;
    const { draw, edit, position } = this.props;
    const options = {
      edit: {
        ...edit,
        featureGroup: layerContainer
      }
    };

    if (draw) {
      options.draw = draw;
    }

    if (position) {
      options.position = position;
    }

    this.leafletElement = new L.Control.Draw(options); // eslint-disable-line
  };

alex3165 / react-leaflet-draw

`draw.rectangle` equality check in `componentDidUpdate` broken #30