Fix onDataAvailable triggers

src/core/Geometry2DRepresentation.tsx

@@ -20,6 +20,7 @@ import { IDownstream, IRepresentation } from '../types';
 import { compareShallowObject } from '../utils/comparators';
 import useBooleanAccumulator from '../utils/useBooleanAccumulator';
 import useComparableEffect from '../utils/useComparableEffect';
+import useLatest from '../utils/useLatest';
 import {
   DownstreamContext,
   RepresentationContext,
@@ -153,13 +154,15 @@ export default forwardRef(function Geometry2DRepresentation(
 
   // --- events --- //
 
-  const { onDataAvailable } = props;
+  const onDataAvailable = useLatest(props.onDataAvailable);
   useEffect(() => {
     if (dataAvailable) {
       // trigger onDataAvailable after making updates to the actor and mapper
-      onDataAvailable?.();
+      onDataAvailable.current?.();
     }
-  }, [dataAvailable, onDataAvailable]);
+    // onDataAvailable is a ref
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dataAvailable]);
 
   // --- //
 

src/core/GeometryRepresentation.tsx

@@ -18,6 +18,7 @@ import { IDownstream, IRepresentation } from '../types';
 import { compareShallowObject } from '../utils/comparators';
 import useBooleanAccumulator from '../utils/useBooleanAccumulator';
 import useComparableEffect from '../utils/useComparableEffect';
+import useLatest from '../utils/useLatest';
 import {
   DownstreamContext,
   RepresentationContext,
@@ -166,13 +167,15 @@ export default forwardRef(function GeometryRepresentation(
 
   // --- events --- //
 
-  const { onDataAvailable } = props;
+  const onDataAvailable = useLatest(props.onDataAvailable);
   useEffect(() => {
     if (dataAvailable) {
       // trigger onDataAvailable after making updates to the actor and mapper
-      onDataAvailable?.();
+      onDataAvailable.current?.();
     }
-  }, [dataAvailable, onDataAvailable]);
+    // onDataAvailable is a ref
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dataAvailable]);
 
   // --- //
 

src/core/SliceRepresentation.tsx

@@ -23,6 +23,7 @@ import { IDownstream, IRepresentation } from '../types';
 import { compareShallowObject } from '../utils/comparators';
 import useBooleanAccumulator from '../utils/useBooleanAccumulator';
 import useComparableEffect from '../utils/useComparableEffect';
+import useLatest from '../utils/useLatest';
 import {
   DownstreamContext,
   RepresentationContext,
@@ -253,13 +254,15 @@ export default forwardRef(function SliceRepresentation(
 
   // --- events --- //
 
-  const { onDataAvailable } = props;
+  const onDataAvailable = useLatest(props.onDataAvailable);
   useEffect(() => {
     if (dataAvailable) {
       // trigger onDataAvailable after making updates to the actor and mapper
-      onDataAvailable?.();
+      onDataAvailable.current?.();
     }
-  }, [dataAvailable, onDataAvailable]);
+    // onDataAvailable is a ref
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dataAvailable]);
 
   // --- //
 

src/utils/useLatest.ts

@@ -0,0 +1,7 @@
+import { useRef } from 'react';
+
+export default function useLatest<T>(val: T) {
+  const ref = useRef(val);
+  ref.current = val;
+  return ref;
+}