[Bug]

[knutmarius]

Description

Using React 18 and strict mode, the onRemove handler passed to the useControl hook seems to be called immediately after the onCreate handler, and this is expected due to how strict mode works in React 18. The problem is that the mount function is not called again afterwards, so it stays unmounted. If I disable strict mode, it works as intended.

Expected Behavior

Expect the onCreate function to be called again when the component remounts.

Steps to Reproduce

export default function DrawControl(props: DrawControlProps) {
  const { onInit, ...rest } = props;
  useControl(
    //@ts-ignore
    ({ map }) => {
      const control = new MapboxDraw(rest);
      onInit(control);
      map.on('draw.create', props.onCreate);
      map.on('draw.update', props.onUpdate);
      map.on('draw.delete', props.onDelete);
      return control;
    },
    ({ map }) => {
      map.off('draw.create', props.onCreate);
      map.off('draw.update', props.onUpdate);
      map.off('draw.delete', props.onDelete);
    },
    {
      position: props.position,
    }
  );

  return null;
}

Environment

• Framework version: react-map-gl@7.0.21, @mapbox/mapbox-gl-draw@1.4.1, react@18.2.0
• Map library: mapbox-gl@2.13.0

Logs

No response

[Pessimistress]

Use the useControl(onCreate, onAdd, onRemove, options) signature.

https://visgl.github.io/react-map-gl/docs/api-reference/use-control#signature