diff --git a/src/core/Geometry2DRepresentation.tsx b/src/core/Geometry2DRepresentation.tsx
index 57df0dd..a19c772 100644
--- a/src/core/Geometry2DRepresentation.tsx
+++ b/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]);
 
   // --- //
 
diff --git a/src/core/GeometryRepresentation.tsx b/src/core/GeometryRepresentation.tsx
index 29c827b..9b1188f 100644
--- a/src/core/GeometryRepresentation.tsx
+++ b/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]);
 
   // --- //
 
diff --git a/src/core/SliceRepresentation.tsx b/src/core/SliceRepresentation.tsx
index e71a883..968b4cf 100644
--- a/src/core/SliceRepresentation.tsx
+++ b/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]);
 
   // --- //
 
diff --git a/src/utils/useLatest.ts b/src/utils/useLatest.ts
new file mode 100644
index 0000000..debb366
--- /dev/null
+++ b/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;
+}