Rework ref handling

lib/Map.js

@@ -15,60 +15,70 @@
  */
 import OLMap from 'ol/Map.js';
 import propTypes from 'prop-types';
-import {Component, createElement, createRef, forwardRef} from 'react';
 import {MAP} from './internal/config.js';
+import {createElement, useCallback, useEffect, useRef} from 'react';
 import {render, updateInstanceFromProps} from './internal/render.js';
 
 const defaultDivStyle = {
   height: '100%',
   width: '100%',
 };
 
-class Map extends Component {
-  constructor(props) {
-    super(props);
+export default function Map({
+  id,
+  style = defaultDivStyle,
+  className,
+  children,
+  ref,
+  options,
+  ...mapProps
+}) {
+  const targetRef = useRef();
+  const mapRef = useRef();
 
-    this.targetRef = createRef();
+  const getMap = useCallback(() => {
+    // avoid creating new map when options object is different
+    if (mapRef.current) {
+      return mapRef.current;
+    }
+
+    const map = new OLMap(options);
+    mapRef.current = map;
+    return map;
+  }, [options]);
 
-    const {id, style, className, innerRef, options, ...mapProps} = props;
-    this.map = new OLMap({...options});
-    if (innerRef) {
-      if (typeof innerRef === 'function') {
-        innerRef(this.map);
+  useEffect(() => {
+    const map = getMap();
+    map.setTarget(targetRef.current);
+  }, [getMap]);
+
+  useEffect(() => {
+    const map = getMap();
+    if (ref) {
+      if (typeof ref === 'function') {
+        ref(map);
       } else {
-        innerRef.current = this.map;
+        ref.current = map;
       }
     }
-    updateInstanceFromProps(this.map, MAP, {}, mapProps);
-  }
-
-  componentDidMount() {
-    this.map.setTarget(this.targetRef.current);
-    render(this.props.children, this.map);
-  }
-
-  componentDidUpdate() {
-    // TODO: apply map prop changes
-    render(this.props.children, this.map);
-  }
+    if (!mapRef.current) {
+      return;
+    }
+    updateInstanceFromProps(map, MAP, {}, mapProps);
+    render(children, map);
+  }, [children, getMap, mapProps, ref]);
 
-  render() {
-    const {id, style = defaultDivStyle, className} = this.props;
-    return createElement('div', {ref: this.targetRef, id, style, className});
-  }
+  return createElement('div', {ref: targetRef, id, style, className});
 }
 
 Map.propTypes = {
   className: propTypes.string,
   id: propTypes.string,
   style: propTypes.object,
   children: propTypes.node,
-  innerRef: propTypes.oneOfType([
+  options: propTypes.object,
+  ref: propTypes.oneOfType([
     propTypes.func,
     propTypes.shape({current: propTypes.any}),
   ]),
 };
-
-export default forwardRef((props, ref) =>
-  createElement(Map, {innerRef: ref, ...props}),
-);

lib/Overlay.js

@@ -15,10 +15,8 @@
  */
 import OLOverlay from 'ol/Overlay.js';
 import {OVERLAY} from './internal/config.js';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const Overlay = forwardRef((props, ref) => {
-  return createElement(OVERLAY, {cls: OLOverlay, ref, ...props});
-});
-
-export default Overlay;
+export default function Overlay(props) {
+  return createElement(OVERLAY, {cls: OLOverlay, ...props});
+}

lib/View.js

@@ -15,10 +15,8 @@
  */
 import OLView from 'ol/View.js';
 import {VIEW} from './internal/config.js';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const View = forwardRef((props, ref) => {
-  return createElement(VIEW, {cls: OLView, ref, ...props});
-});
-
-export default View;
+export default function View(props) {
+  return createElement(VIEW, {cls: OLView, ...props});
+}

lib/control/Attribution.js

@@ -15,10 +15,8 @@
  * limitations under the License.
  */
 import OLAttribution from 'ol/control/Attribution.js';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const Attribution = forwardRef((props, ref) => {
-  return createElement('control', {cls: OLAttribution, ref, ...props});
-});
-
-export default Attribution;
+export default function Attribution(props) {
+  return createElement('control', {cls: OLAttribution, ...props});
+}

lib/control/Control.js

@@ -15,10 +15,8 @@
  * limitations under the License.
  */
 import OLControl from 'ol/control/Control.js';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const Control = forwardRef((props, ref) => {
-  return createElement('control', {cls: OLControl, ref, ...props});
-});
-
-export default Control;
+export default function Control(props) {
+  return createElement('control', {cls: OLControl, ...props});
+}

lib/control/FullScreen.js

@@ -15,10 +15,8 @@
  * limitations under the License.
  */
 import OLFullScreen from 'ol/control/FullScreen.js';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const FullScreen = forwardRef((props, ref) => {
-  return createElement('control', {cls: OLFullScreen, ref, ...props});
-});
-
-export default FullScreen;
+export default function FullScreen(props) {
+  return createElement('control', {cls: OLFullScreen, ...props});
+}

lib/control/MousePosition.js

@@ -15,10 +15,8 @@
  * limitations under the License.
  */
 import OLMousePosition from 'ol/control/MousePosition.js';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const MousePosition = forwardRef((props, ref) => {
-  return createElement('control', {cls: OLMousePosition, ref, ...props});
-});
-
-export default MousePosition;
+export default function MousePosition(props) {
+  return createElement('control', {cls: OLMousePosition, ...props});
+}

lib/control/OverviewMap.js

@@ -15,10 +15,8 @@
  * limitations under the License.
  */
 import OLOverviewMap from 'ol/control/OverviewMap.js';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const OverviewMap = forwardRef((props, ref) => {
-  return createElement('control', {cls: OLOverviewMap, ref, ...props});
-});
-
-export default OverviewMap;
+export default function OverviewMap(props) {
+  return createElement('control', {cls: OLOverviewMap, ...props});
+}

lib/control/Rotate.js

@@ -15,10 +15,8 @@
  * limitations under the License.
  */
 import OLRotate from 'ol/control/Rotate.js';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const Rotate = forwardRef((props, ref) => {
-  return createElement('control', {cls: OLRotate, ref, ...props});
-});
-
-export default Rotate;
+export default function Rotate(props) {
+  return createElement('control', {cls: OLRotate, ...props});
+}

lib/control/ScaleLine.js

@@ -15,10 +15,8 @@
  * limitations under the License.
  */
 import OLScaleLine from 'ol/control/ScaleLine.js';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const ScaleLine = forwardRef((props, ref) => {
-  return createElement('control', {cls: OLScaleLine, ref, ...props});
-});
-
-export default ScaleLine;
+export default function ScaleLine(props) {
+  return createElement('control', {cls: OLScaleLine, ...props});
+}

lib/control/Zoom.js

@@ -15,10 +15,8 @@
  * limitations under the License.
  */
 import OLZoom from 'ol/control/Zoom.js';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const Zoom = forwardRef((props, ref) => {
-  return createElement('control', {cls: OLZoom, ref, ...props});
-});
-
-export default Zoom;
+export default function Zoom(props) {
+  return createElement('control', {cls: OLZoom, ...props});
+}

lib/control/ZoomSlider.js

@@ -15,10 +15,8 @@
  * limitations under the License.
  */
 import OLZoomSlider from 'ol/control/ZoomSlider.js';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const ZoomSlider = forwardRef((props, ref) => {
-  return createElement('control', {cls: OLZoomSlider, ref, ...props});
-});
-
-export default ZoomSlider;
+export default function ZoomSlider(props) {
+  return createElement('control', {cls: OLZoomSlider, ...props});
+}

lib/control/ZoomToExtent.js

@@ -15,10 +15,8 @@
  * limitations under the License.
  */
 import OLZoomToExtent from 'ol/control/ZoomToExtent.js';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const ZoomToExtent = forwardRef((props, ref) => {
-  return createElement('control', {cls: OLZoomToExtent, ref, ...props});
-});
-
-export default ZoomToExtent;
+export default function ZoomToExtent(props) {
+  return createElement('control', {cls: OLZoomToExtent, ...props});
+}

lib/interaction/DblClickDragZoom.js

@@ -15,10 +15,8 @@
  * limitations under the License.
  */
 import OLDblClickDragZoom from 'ol/interaction/DblClickDragZoom.js';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const DblClickDragZoom = forwardRef((props, ref) => {
-  return createElement('interaction', {cls: OLDblClickDragZoom, ref, ...props});
-});
-
-export default DblClickDragZoom;
+export default function DblClickDragZoom(props) {
+  return createElement('interaction', {cls: OLDblClickDragZoom, ...props});
+}

lib/interaction/DoubleClickZoom.js

@@ -15,10 +15,8 @@
  * limitations under the License.
  */
 import OLDoubleClickZoom from 'ol/interaction/DoubleClickZoom.js';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const DoubleClickZoom = forwardRef((props, ref) => {
-  return createElement('interaction', {cls: OLDoubleClickZoom, ref, ...props});
-});
-
-export default DoubleClickZoom;
+export default function DoubleClickZoom(props) {
+  return createElement('interaction', {cls: OLDoubleClickZoom, ...props});
+}

lib/interaction/DragAndDrop.js

@@ -15,10 +15,8 @@
  * limitations under the License.
  */
 import OLDragAndDrop from 'ol/interaction/DragAndDrop.js';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const DragAndDrop = forwardRef((props, ref) => {
-  return createElement('interaction', {cls: OLDragAndDrop, ref, ...props});
-});
-
-export default DragAndDrop;
+export default function DragAndDrop(props) {
+  return createElement('interaction', {cls: OLDragAndDrop, ...props});
+}

lib/interaction/DragBox.js

@@ -15,10 +15,8 @@
  * limitations under the License.
  */
 import OLDragBox from 'ol/interaction/DragBox.js';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const DragBox = forwardRef((props, ref) => {
-  return createElement('interaction', {cls: OLDragBox, ref, ...props});
-});
-
-export default DragBox;
+export default function DragBox(props) {
+  return createElement('interaction', {cls: OLDragBox, ...props});
+}

lib/interaction/DragPan.js

@@ -15,10 +15,8 @@
  * limitations under the License.
  */
 import OLDragPan from 'ol/interaction/DragPan.js';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const DragPan = forwardRef((props, ref) => {
-  return createElement('interaction', {cls: OLDragPan, ref, ...props});
-});
-
-export default DragPan;
+export default function DragPan(props) {
+  return createElement('interaction', {cls: OLDragPan, ...props});
+}

lib/interaction/DragRotate.js

@@ -15,10 +15,8 @@
  * limitations under the License.
  */
 import OLDragRotate from 'ol/interaction/DragRotate.js';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const DragRotate = forwardRef((props, ref) => {
-  return createElement('interaction', {cls: OLDragRotate, ref, ...props});
-});
-
-export default DragRotate;
+export default function DragRotate(props) {
+  return createElement('interaction', {cls: OLDragRotate, ...props});
+}

lib/interaction/DragRotateAndZoom.js

@@ -15,14 +15,8 @@
  * limitations under the License.
  */
 import OLDragRotateAndZoom from 'ol/interaction/DragRotateAndZoom.js';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const DragRotateAndZoom = forwardRef((props, ref) => {
-  return createElement('interaction', {
-    cls: OLDragRotateAndZoom,
-    ref,
-    ...props,
-  });
-});
-
-export default DragRotateAndZoom;
+export default function DragRotateAndZoom(props) {
+  return createElement('interaction', {cls: OLDragRotateAndZoom, ...props});
+}