Applied fix from @maerten #113 to avoid unmount code in useEffect() running twice in React 18 strict mode

Author: aeagle

src/components/Space.tsx

@@ -1,5 +1,5 @@
 import { CenterType, ResizeHandlePlacement, AnchorType, Type } from "../core-types";
-import { useSpace, ParentContext, LayerContext, DOMRectContext, IReactSpaceInnerProps } from "../core-react";
+import { useSpace, ParentContext, LayerContext, DOMRectContext, IReactSpaceInnerProps, useEffectOnce } from "../core-react";
 import * as React from "react";
 import { Centered } from "./Centered";
 import { CenteredVertically } from "./CenteredVertically";
@@ -59,9 +59,9 @@ const SpaceInner: React.FC<IReactSpaceInnerProps & { wrapperInstance: Space }> =
 		...{ id: props.id || props.wrapperInstance["_react_spaces_uniqueid"] },
 	});
 
-	React.useEffect(() => {
+	useEffectOnce(() => {
 		space.element = elementRef.current!;
-	}, []);
+	});
 
 	const userClasses = className ? className.split(" ").map((c) => c.trim()) : [];
 

src/core-react.ts

@@ -1,9 +1,56 @@
 import * as React from "react";
 import { createStore } from "./core";
-import { ISpaceProps, ISpaceStore, ISpaceDefinition, ResizeType, CenterType, ISpaceContext, ICommonProps } from "./core-types";
+import {
+	ISpaceProps,
+	ISpaceStore,
+	ISpaceDefinition,
+	ResizeType,
+	CenterType,
+	ISpaceContext,
+	ICommonProps,
+	ResizeMouseEvent,
+	OnDragEnd,
+	ResizeTouchEvent,
+} from "./core-types";
 import { coalesce, shortuuid } from "./core-utils";
 import { ResizeSensor } from "css-element-queries";
 import * as PropTypes from "prop-types";
+import { useEffect, useRef, useState } from "react";
+
+// WORKAROUND for React18 strict mode
+// https://blog.ag-grid.com/avoiding-react-18-double-mount/
+export const useEffectOnce = (effect: () => void | (() => void)) => {
+	const destroyFunc = useRef<void | (() => void)>();
+	const effectCalled = useRef(false);
+	const renderAfterCalled = useRef(false);
+	const [_val, setVal] = useState<number>(0);
+
+	if (effectCalled.current) {
+		renderAfterCalled.current = true;
+	}
+
+	useEffect(() => {
+		// only execute the effect first time around
+		if (!effectCalled.current) {
+			destroyFunc.current = effect();
+			effectCalled.current = true;
+		}
+
+		// this forces one render after the effect is run
+		setVal((val) => val + 1);
+
+		return () => {
+			// if the comp didn't render since the useEffect was called,
+			// we know it's the dummy React cycle
+			if (!renderAfterCalled.current) {
+				return;
+			}
+			if (destroyFunc.current) {
+				destroyFunc.current();
+			}
+		};
+	}, []);
+};
 
 export const ParentContext = React.createContext<string | undefined>(undefined);
 export const DOMRectContext = React.createContext<DOMRect | undefined>(undefined);
@@ -105,7 +152,7 @@ export function useSpace(props: IReactSpaceInnerProps) {
 
 	const resizeHandles = useSpaceResizeHandles(store, space);
 
-	React.useEffect(() => {
+	useEffectOnce(() => {
 		const rect = elementRef.current!.getBoundingClientRect() as DOMRect;
 		space!.dimension = {
 			...rect,
@@ -139,7 +186,7 @@ export function useSpace(props: IReactSpaceInnerProps) {
 			resizeSensor.current && resizeSensor.current.detach();
 			store.removeSpace(space!);
 		};
-	}, []);
+	});
 
 	return { space: space, resizeHandles: resizeHandles, domRect: domRect, elementRef: elementRef };
 }
@@ -208,8 +255,14 @@ export function useCurrentSpace() {
 
 	const domRect = React.useContext(DOMRectContext);
 	const layer = React.useContext(LayerContext);
-	const onMouseDrag = React.useCallback((e, onDragEnd) => (space ? store.startMouseDrag(space, e, onDragEnd) : null), [spaceId]);
-	const onTouchDrag = React.useCallback((e, onDragEnd) => (space ? store.startTouchDrag(space, e, onDragEnd) : null), [spaceId]);
+	const onMouseDrag = React.useCallback(
+		(e: ResizeMouseEvent, onDragEnd: OnDragEnd | undefined) => (space ? store.startMouseDrag(space, e, onDragEnd) : null),
+		[spaceId],
+	);
+	const onTouchDrag = React.useCallback(
+		(e: ResizeTouchEvent, onDragEnd: OnDragEnd | undefined) => (space ? store.startTouchDrag(space, e, onDragEnd) : null),
+		[spaceId],
+	);
 	const onForceUpdate = React.useCallback(() => (space ? store.updateStyles(space) : null), [spaceId]);
 
 	const defaults = { width: 0, height: 0, x: 0, y: 0 };