@motiadev/stream-client-react 0.15.6-beta.174 → 0.16.0-beta.175

package/dist/index.d.ts

@@ -65,6 +65,7 @@ type StreamGroupArgs<TData extends {
   streamName: string;
   groupId: string;
   sortKey?: keyof TData;
+  setData?: (data: TData[]) => void;
 };
 /**
  * A hook to get a group of items from a stream.

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../src/motia-stream-provider.tsx","../src/use-motia-stream.ts","../src/use-stream-event-handler.ts","../src/use-stream-group.ts","../src/use-stream-item.ts"],"sourcesContent":[],"mappings":";;;;;KAIK,KAAA,GAAQ,KAAA,CAAM;;;;;;AAcnB;;;;ECPa,OAAA,EAAA,MAAA;;;cDOA,qBAAqB,KAAA,CAAM,GAAG;;;;;;;;;AAA3C;;cCPa;UAQZ,gCAAA,CAAA,MAAA;AARD,CAAA;;;KCRK,qBAAA;SACI;;EFAJ,QAAK,EAAA,CAAA,KAAA,EAAA,GAAG,EAAA,GAAM,IAAA;AAcnB,CAAA;;;;ACPA;;;;ACVsD;AAwBtD;;;;;;;cAAa;;;;GACgB,qCACb;;;KCvBJ;;;;EHAP,OAAA,EAAK,MAAA;EAcG,OAAA,CAAA,EAAA,MGXK,KHWL;;;;ACPb;;;;ACVsD;AAwBtD;;;;;;;;;;ACrBA;AAyBA;AAAoF,cAAvE,cAAuE,EAAA,CAAA,cAAA;EAAhB,EAAA,EAAA,MAAA;UAAA,gBAAgB;;;;;;KCzBxE,cAAA;;;;;AJcZ;;;;ACPA;;;;ACVsD;AAwBtD;;;;;;;cECa,8BAA+B;;;ADtB5C,CAAA"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../src/motia-stream-provider.tsx","../src/use-motia-stream.ts","../src/use-stream-event-handler.ts","../src/use-stream-group.ts","../src/use-stream-item.ts"],"sourcesContent":[],"mappings":";;;;;KAIK,KAAA,GAAQ,KAAA,CAAM;;;;;;AAcnB;;;;ECPa,OAAA,EAAA,MAAA;;;cDOA,qBAAqB,KAAA,CAAM,GAAG;;;;;;;;;AAA3C;;cCPa;UAQZ,gCAAA,CAAA,MAAA;AARD,CAAA;;;KCRK,qBAAA;SACI;;EFAJ,QAAK,EAAA,CAAA,KAAA,EAAA,GAAG,EAAA,GAAM,IAAA;AAcnB,CAAA;;;;ACPA;;;;ACVsD;AAwBtD;;;;;;;cAAa;;;;GACgB,qCACb;;;KCvBJ;;;;EHAP,OAAA,EAAK,MAAA;EAcG,OAAA,CAAA,EAAA,MGXK,KHWL;mBGVM;;;AFGnB;;;;ACVsD;AAwBtD;;;;;;;;;;ACrBA;AA0BA;;AAAoE,cAAvD,cAAuD,EAAA,CAAA,cAAA;;UAAA,gBAAgB;;;;;;KC1BxE,cAAA;;;;;AJcZ;;;;ACPA;;;;ACVsD;AAwBtD;;;;;;;cECa,8BAA+B;;;ADtB5C,CAAA"}

package/dist/index.js

@@ -1,5 +1,5 @@
 import { Stream, Stream as Stream$1, StreamGroupSubscription, StreamItemSubscription } from "@motiadev/stream-client-browser";
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/motia-stream-context.ts
@@ -91,31 +91,31 @@ const useStreamEventHandler = ({ event, type, listener }, dependencies) => {
 const useStreamGroup = (args) => {
 	const { stream } = useMotiaStream();
 	const [data, setData] = useState([]);
-	const [event, setEvent] = useState(null);
-	const { streamName, groupId, sortKey } = args || {};
-	const handleChange = useCallback((data$1) => {
-		setData(data$1);
-	}, []);
+	const subscriptionRef = useRef(null);
+	const { streamName, groupId, sortKey, setData: setDataCallback } = args || {};
 	useEffect(() => {
 		if (!streamName || !groupId || !stream) return;
-		const subscription = stream.subscribeGroup(streamName, groupId, sortKey);
-		subscription.addChangeListener(handleChange);
-		setEvent(subscription);
+		subscriptionRef.current = stream.subscribeGroup(streamName, groupId, sortKey);
+		subscriptionRef.current.addChangeListener((data$1) => {
+			const typedData = data$1;
+			setData(typedData);
+			setDataCallback?.(typedData);
+		});
 		return () => {
+			subscriptionRef.current?.close();
+			subscriptionRef.current = null;
 			setData([]);
-			setEvent(null);
-			subscription.close();
 		};
 	}, [
 		stream,
 		streamName,
 		groupId,
 		sortKey,
-		handleChange
+		setDataCallback
 	]);
 	return {
 		data,
-		event
+		event: subscriptionRef.current
 	};
 };
 

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["MotiaStreamProvider: React.FC<Props>","Stream","data","data"],"sources":["../src/motia-stream-context.ts","../src/motia-stream-provider.tsx","../src/use-motia-stream.ts","../src/use-stream-event-handler.ts","../src/use-stream-group.ts","../src/use-stream-item.ts"],"sourcesContent":["import type { Stream } from '@motiadev/stream-client-browser'\nimport React from 'react'\n\ntype MotiaStreamContextType = {\n  stream: Stream | null\n}\n\nexport const MotiaStreamContext = React.createContext<MotiaStreamContextType>({\n  stream: null,\n})\n","import { Stream } from '@motiadev/stream-client-browser'\nimport { useEffect, useMemo, useState } from 'react'\nimport { MotiaStreamContext } from './motia-stream-context'\n\ntype Props = React.PropsWithChildren<{\n  /**\n   * The address of the stream server.\n   *\n   * @example\n   * ```tsx\n   * <MotiaStreamProvider address=\"ws://localhost:3000\">\n   *   <App />\n   * </MotiaStreamProvider>\n   * */\n  address: string\n  protocols?: string | string[] | undefined\n}>\n\nexport const MotiaStreamProvider: React.FC<Props> = ({ children, address, protocols }) => {\n  const [stream, setStream] = useState<Stream | null>(null)\n\n  useEffect(() => {\n    const streamInstance = new Stream(address, { protocols })\n    setStream(streamInstance)\n    return () => streamInstance.close()\n  }, [address, protocols])\n\n  const contextValue = useMemo(() => ({ stream }), [stream])\n\n  return <MotiaStreamContext.Provider value={contextValue}>{children}</MotiaStreamContext.Provider>\n}\n","import React from 'react'\nimport { MotiaStreamContext } from './motia-stream-context'\n\n/**\n * A hook to get the stream context.\n *\n * @example\n * ```tsx\n * const { stream } = useMotiaStream()\n * ```\n */\nexport const useMotiaStream = () => {\n  const context = React.useContext(MotiaStreamContext)\n\n  if (!context) {\n    throw new Error('useMotiaStream must be used within a MotiaStreamProvider')\n  }\n\n  return context\n}\n","import type { StreamSubscription } from '@motiadev/stream-client-browser'\nimport { type DependencyList, useEffect } from 'react'\n\ntype UseStreamEventHandler = {\n  event: StreamSubscription | null\n  type: string\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  listener: (event: any) => void\n}\n\n/**\n * A hook to handle custom stream events.\n *\n * @example\n * ```tsx\n * const { event } = useStreamItem({ streamName: 'my-stream', id: '123' })\n *\n * const onEventHandled = (event: any) => {\n *   // this is going to be called whenever 'on-custom-event' is sent from the server\n *   console.log(event)\n * }\n *\n * useStreamEventHandler({ event, type: 'on-custom-event', listener: onEventHandled }, [])\n * ```\n */\nexport const useStreamEventHandler = (\n  { event, type, listener }: UseStreamEventHandler,\n  dependencies: DependencyList,\n) => {\n  useEffect(() => {\n    if (event) {\n      event.onEvent(type, listener)\n      return () => event.offEvent(type, listener)\n    }\n  }, [event, type, ...dependencies])\n}\n","import type { StreamSubscription } from '@motiadev/stream-client-browser'\nimport { useCallback, useEffect, useState } from 'react'\nimport { useMotiaStream } from './use-motia-stream'\n\nexport type StreamGroupArgs<TData extends { id: string }> = {\n  streamName: string\n  groupId: string\n  sortKey?: keyof TData\n}\n\n/**\n * A hook to get a group of items from a stream.\n *\n * @example\n * ```tsx\n * const { data } = useStreamGroup<{ id:string; name: string }>({\n *   streamName: 'my-stream',\n *   groupId: '123',\n * })\n *\n * return (\n *   <div>\n *     {data.map((item) => (\n *       <div key={item.id}>{item.name}</div>\n *     ))}\n *   </div>\n * )\n * ```\n */\nexport const useStreamGroup = <TData extends { id: string }>(args?: StreamGroupArgs<TData>) => {\n  const { stream } = useMotiaStream()\n  const [data, setData] = useState<TData[]>([])\n  const [event, setEvent] = useState<StreamSubscription | null>(null)\n\n  const { streamName, groupId, sortKey } = args || {}\n\n  const handleChange = useCallback((data: unknown) => {\n    setData(data as TData[])\n  }, [])\n\n  useEffect(() => {\n    if (!streamName || !groupId || !stream) return\n\n    const subscription = stream.subscribeGroup(streamName, groupId, sortKey)\n\n    subscription.addChangeListener(handleChange)\n    setEvent(subscription)\n\n    return () => {\n      setData([])\n      setEvent(null)\n      subscription.close()\n    }\n  }, [stream, streamName, groupId, sortKey, handleChange])\n\n  return { data, event }\n}\n","import type { StreamSubscription } from '@motiadev/stream-client-browser'\nimport { useCallback, useEffect, useState } from 'react'\nimport { useMotiaStream } from './use-motia-stream'\n\nexport type StreamItemArgs = {\n  streamName: string\n  groupId: string\n  id?: string\n}\n\n/**\n * A hook to get a single item from a stream.\n *\n * @example\n * ```tsx\n * const { data } = useStreamItem<{ id:string; name: string }>({\n *   streamName: 'my-stream',\n *   groupId: '123',\n *   id: '123',\n * })\n *\n * return (\n *   <div>{data?.name}</div>\n * )\n * ```\n */\nexport const useStreamItem = <TData>(args?: StreamItemArgs) => {\n  const { stream } = useMotiaStream()\n  const [data, setData] = useState<TData | null | undefined>()\n  const [event, setEvent] = useState<StreamSubscription | null>(null)\n  const { streamName, groupId, id } = args || {}\n\n  const handleChange = useCallback((data: unknown) => {\n    setData(data as TData)\n  }, [])\n\n  useEffect(() => {\n    if (!streamName || !groupId || !id || !stream) return\n\n    const subscription = stream.subscribeItem(streamName, groupId, id)\n\n    subscription.addChangeListener(handleChange)\n    setEvent(subscription)\n\n    return () => {\n      setData(undefined)\n      setEvent(null)\n      subscription.close()\n    }\n  }, [stream, streamName, groupId, id, handleChange])\n\n  return { data, event }\n}\n"],"mappings":";;;;;AAOA,MAAa,qBAAqB,MAAM,cAAsC,EAC5E,QAAQ,MACT,CAAC;;;;ACSF,MAAaA,uBAAwC,EAAE,UAAU,SAAS,gBAAgB;CACxF,MAAM,CAAC,QAAQ,aAAa,SAAwB,KAAK;AAEzD,iBAAgB;EACd,MAAM,iBAAiB,IAAIC,SAAO,SAAS,EAAE,WAAW,CAAC;AACzD,YAAU,eAAe;AACzB,eAAa,eAAe,OAAO;IAClC,CAAC,SAAS,UAAU,CAAC;CAExB,MAAM,eAAe,eAAe,EAAE,QAAQ,GAAG,CAAC,OAAO,CAAC;AAE1D,QAAO,oBAAC,mBAAmB;EAAS,OAAO;EAAe;GAAuC;;;;;;;;;;;;;AClBnG,MAAa,uBAAuB;CAClC,MAAM,UAAU,MAAM,WAAW,mBAAmB;AAEpD,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,2DAA2D;AAG7E,QAAO;;;;;;;;;;;;;;;;;;;;ACOT,MAAa,yBACX,EAAE,OAAO,MAAM,YACf,iBACG;AACH,iBAAgB;AACd,MAAI,OAAO;AACT,SAAM,QAAQ,MAAM,SAAS;AAC7B,gBAAa,MAAM,SAAS,MAAM,SAAS;;IAE5C;EAAC;EAAO;EAAM,GAAG;EAAa,CAAC;;;;;;;;;;;;;;;;;;;;;;;;ACLpC,MAAa,kBAAgD,SAAkC;CAC7F,MAAM,EAAE,WAAW,gBAAgB;CACnC,MAAM,CAAC,MAAM,WAAW,SAAkB,EAAE,CAAC;CAC7C,MAAM,CAAC,OAAO,YAAY,SAAoC,KAAK;CAEnE,MAAM,EAAE,YAAY,SAAS,YAAY,QAAQ,EAAE;CAEnD,MAAM,eAAe,aAAa,WAAkB;AAClD,UAAQC,OAAgB;IACvB,EAAE,CAAC;AAEN,iBAAgB;AACd,MAAI,CAAC,cAAc,CAAC,WAAW,CAAC,OAAQ;EAExC,MAAM,eAAe,OAAO,eAAe,YAAY,SAAS,QAAQ;AAExE,eAAa,kBAAkB,aAAa;AAC5C,WAAS,aAAa;AAEtB,eAAa;AACX,WAAQ,EAAE,CAAC;AACX,YAAS,KAAK;AACd,gBAAa,OAAO;;IAErB;EAAC;EAAQ;EAAY;EAAS;EAAS;EAAa,CAAC;AAExD,QAAO;EAAE;EAAM;EAAO;;;;;;;;;;;;;;;;;;;;;AC7BxB,MAAa,iBAAwB,SAA0B;CAC7D,MAAM,EAAE,WAAW,gBAAgB;CACnC,MAAM,CAAC,MAAM,WAAW,UAAoC;CAC5D,MAAM,CAAC,OAAO,YAAY,SAAoC,KAAK;CACnE,MAAM,EAAE,YAAY,SAAS,OAAO,QAAQ,EAAE;CAE9C,MAAM,eAAe,aAAa,WAAkB;AAClD,UAAQC,OAAc;IACrB,EAAE,CAAC;AAEN,iBAAgB;AACd,MAAI,CAAC,cAAc,CAAC,WAAW,CAAC,MAAM,CAAC,OAAQ;EAE/C,MAAM,eAAe,OAAO,cAAc,YAAY,SAAS,GAAG;AAElE,eAAa,kBAAkB,aAAa;AAC5C,WAAS,aAAa;AAEtB,eAAa;AACX,WAAQ,OAAU;AAClB,YAAS,KAAK;AACd,gBAAa,OAAO;;IAErB;EAAC;EAAQ;EAAY;EAAS;EAAI;EAAa,CAAC;AAEnD,QAAO;EAAE;EAAM;EAAO"}
+{"version":3,"file":"index.js","names":["MotiaStreamProvider: React.FC<Props>","Stream","data","data"],"sources":["../src/motia-stream-context.ts","../src/motia-stream-provider.tsx","../src/use-motia-stream.ts","../src/use-stream-event-handler.ts","../src/use-stream-group.ts","../src/use-stream-item.ts"],"sourcesContent":["import type { Stream } from '@motiadev/stream-client-browser'\nimport React from 'react'\n\ntype MotiaStreamContextType = {\n  stream: Stream | null\n}\n\nexport const MotiaStreamContext = React.createContext<MotiaStreamContextType>({\n  stream: null,\n})\n","import { Stream } from '@motiadev/stream-client-browser'\nimport { useEffect, useMemo, useState } from 'react'\nimport { MotiaStreamContext } from './motia-stream-context'\n\ntype Props = React.PropsWithChildren<{\n  /**\n   * The address of the stream server.\n   *\n   * @example\n   * ```tsx\n   * <MotiaStreamProvider address=\"ws://localhost:3000\">\n   *   <App />\n   * </MotiaStreamProvider>\n   * */\n  address: string\n  protocols?: string | string[] | undefined\n}>\n\nexport const MotiaStreamProvider: React.FC<Props> = ({ children, address, protocols }) => {\n  const [stream, setStream] = useState<Stream | null>(null)\n\n  useEffect(() => {\n    const streamInstance = new Stream(address, { protocols })\n    setStream(streamInstance)\n    return () => streamInstance.close()\n  }, [address, protocols])\n\n  const contextValue = useMemo(() => ({ stream }), [stream])\n\n  return <MotiaStreamContext.Provider value={contextValue}>{children}</MotiaStreamContext.Provider>\n}\n","import React from 'react'\nimport { MotiaStreamContext } from './motia-stream-context'\n\n/**\n * A hook to get the stream context.\n *\n * @example\n * ```tsx\n * const { stream } = useMotiaStream()\n * ```\n */\nexport const useMotiaStream = () => {\n  const context = React.useContext(MotiaStreamContext)\n\n  if (!context) {\n    throw new Error('useMotiaStream must be used within a MotiaStreamProvider')\n  }\n\n  return context\n}\n","import type { StreamSubscription } from '@motiadev/stream-client-browser'\nimport { type DependencyList, useEffect } from 'react'\n\ntype UseStreamEventHandler = {\n  event: StreamSubscription | null\n  type: string\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  listener: (event: any) => void\n}\n\n/**\n * A hook to handle custom stream events.\n *\n * @example\n * ```tsx\n * const { event } = useStreamItem({ streamName: 'my-stream', id: '123' })\n *\n * const onEventHandled = (event: any) => {\n *   // this is going to be called whenever 'on-custom-event' is sent from the server\n *   console.log(event)\n * }\n *\n * useStreamEventHandler({ event, type: 'on-custom-event', listener: onEventHandled }, [])\n * ```\n */\nexport const useStreamEventHandler = (\n  { event, type, listener }: UseStreamEventHandler,\n  dependencies: DependencyList,\n) => {\n  useEffect(() => {\n    if (event) {\n      event.onEvent(type, listener)\n      return () => event.offEvent(type, listener)\n    }\n  }, [event, type, ...dependencies])\n}\n","import type { StreamSubscription } from '@motiadev/stream-client-browser'\nimport { useEffect, useRef, useState } from 'react'\nimport { useMotiaStream } from './use-motia-stream'\n\nexport type StreamGroupArgs<TData extends { id: string }> = {\n  streamName: string\n  groupId: string\n  sortKey?: keyof TData\n  setData?: (data: TData[]) => void\n}\n\n/**\n * A hook to get a group of items from a stream.\n *\n * @example\n * ```tsx\n * const { data } = useStreamGroup<{ id:string; name: string }>({\n *   streamName: 'my-stream',\n *   groupId: '123',\n * })\n *\n * return (\n *   <div>\n *     {data.map((item) => (\n *       <div key={item.id}>{item.name}</div>\n *     ))}\n *   </div>\n * )\n * ```\n */\nexport const useStreamGroup = <TData extends { id: string }>(args?: StreamGroupArgs<TData>) => {\n  const { stream } = useMotiaStream()\n  const [data, setData] = useState<TData[]>([])\n  const subscriptionRef = useRef<StreamSubscription | null>(null)\n\n  const { streamName, groupId, sortKey, setData: setDataCallback } = args || {}\n\n  useEffect(() => {\n    if (!streamName || !groupId || !stream) return\n\n    subscriptionRef.current = stream.subscribeGroup(streamName, groupId, sortKey)\n\n    subscriptionRef.current.addChangeListener((data) => {\n      const typedData = data as TData[]\n      setData(typedData)\n      setDataCallback?.(typedData)\n    })\n\n    return () => {\n      subscriptionRef.current?.close()\n      subscriptionRef.current = null\n      setData([])\n    }\n  }, [stream, streamName, groupId, sortKey, setDataCallback])\n\n  return { data, event: subscriptionRef.current }\n}\n","import type { StreamSubscription } from '@motiadev/stream-client-browser'\nimport { useCallback, useEffect, useState } from 'react'\nimport { useMotiaStream } from './use-motia-stream'\n\nexport type StreamItemArgs = {\n  streamName: string\n  groupId: string\n  id?: string\n}\n\n/**\n * A hook to get a single item from a stream.\n *\n * @example\n * ```tsx\n * const { data } = useStreamItem<{ id:string; name: string }>({\n *   streamName: 'my-stream',\n *   groupId: '123',\n *   id: '123',\n * })\n *\n * return (\n *   <div>{data?.name}</div>\n * )\n * ```\n */\nexport const useStreamItem = <TData>(args?: StreamItemArgs) => {\n  const { stream } = useMotiaStream()\n  const [data, setData] = useState<TData | null | undefined>()\n  const [event, setEvent] = useState<StreamSubscription | null>(null)\n  const { streamName, groupId, id } = args || {}\n\n  const handleChange = useCallback((data: unknown) => {\n    setData(data as TData)\n  }, [])\n\n  useEffect(() => {\n    if (!streamName || !groupId || !id || !stream) return\n\n    const subscription = stream.subscribeItem(streamName, groupId, id)\n\n    subscription.addChangeListener(handleChange)\n    setEvent(subscription)\n\n    return () => {\n      setData(undefined)\n      setEvent(null)\n      subscription.close()\n    }\n  }, [stream, streamName, groupId, id, handleChange])\n\n  return { data, event }\n}\n"],"mappings":";;;;;AAOA,MAAa,qBAAqB,MAAM,cAAsC,EAC5E,QAAQ,MACT,CAAC;;;;ACSF,MAAaA,uBAAwC,EAAE,UAAU,SAAS,gBAAgB;CACxF,MAAM,CAAC,QAAQ,aAAa,SAAwB,KAAK;AAEzD,iBAAgB;EACd,MAAM,iBAAiB,IAAIC,SAAO,SAAS,EAAE,WAAW,CAAC;AACzD,YAAU,eAAe;AACzB,eAAa,eAAe,OAAO;IAClC,CAAC,SAAS,UAAU,CAAC;CAExB,MAAM,eAAe,eAAe,EAAE,QAAQ,GAAG,CAAC,OAAO,CAAC;AAE1D,QAAO,oBAAC,mBAAmB;EAAS,OAAO;EAAe;GAAuC;;;;;;;;;;;;;AClBnG,MAAa,uBAAuB;CAClC,MAAM,UAAU,MAAM,WAAW,mBAAmB;AAEpD,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,2DAA2D;AAG7E,QAAO;;;;;;;;;;;;;;;;;;;;ACOT,MAAa,yBACX,EAAE,OAAO,MAAM,YACf,iBACG;AACH,iBAAgB;AACd,MAAI,OAAO;AACT,SAAM,QAAQ,MAAM,SAAS;AAC7B,gBAAa,MAAM,SAAS,MAAM,SAAS;;IAE5C;EAAC;EAAO;EAAM,GAAG;EAAa,CAAC;;;;;;;;;;;;;;;;;;;;;;;;ACJpC,MAAa,kBAAgD,SAAkC;CAC7F,MAAM,EAAE,WAAW,gBAAgB;CACnC,MAAM,CAAC,MAAM,WAAW,SAAkB,EAAE,CAAC;CAC7C,MAAM,kBAAkB,OAAkC,KAAK;CAE/D,MAAM,EAAE,YAAY,SAAS,SAAS,SAAS,oBAAoB,QAAQ,EAAE;AAE7E,iBAAgB;AACd,MAAI,CAAC,cAAc,CAAC,WAAW,CAAC,OAAQ;AAExC,kBAAgB,UAAU,OAAO,eAAe,YAAY,SAAS,QAAQ;AAE7E,kBAAgB,QAAQ,mBAAmB,WAAS;GAClD,MAAM,YAAYC;AAClB,WAAQ,UAAU;AAClB,qBAAkB,UAAU;IAC5B;AAEF,eAAa;AACX,mBAAgB,SAAS,OAAO;AAChC,mBAAgB,UAAU;AAC1B,WAAQ,EAAE,CAAC;;IAEZ;EAAC;EAAQ;EAAY;EAAS;EAAS;EAAgB,CAAC;AAE3D,QAAO;EAAE;EAAM,OAAO,gBAAgB;EAAS;;;;;;;;;;;;;;;;;;;;;AC7BjD,MAAa,iBAAwB,SAA0B;CAC7D,MAAM,EAAE,WAAW,gBAAgB;CACnC,MAAM,CAAC,MAAM,WAAW,UAAoC;CAC5D,MAAM,CAAC,OAAO,YAAY,SAAoC,KAAK;CACnE,MAAM,EAAE,YAAY,SAAS,OAAO,QAAQ,EAAE;CAE9C,MAAM,eAAe,aAAa,WAAkB;AAClD,UAAQC,OAAc;IACrB,EAAE,CAAC;AAEN,iBAAgB;AACd,MAAI,CAAC,cAAc,CAAC,WAAW,CAAC,MAAM,CAAC,OAAQ;EAE/C,MAAM,eAAe,OAAO,cAAc,YAAY,SAAS,GAAG;AAElE,eAAa,kBAAkB,aAAa;AAC5C,WAAS,aAAa;AAEtB,eAAa;AACX,WAAQ,OAAU;AAClB,YAAS,KAAK;AACd,gBAAa,OAAO;;IAErB;EAAC;EAAQ;EAAY;EAAS;EAAI;EAAa,CAAC;AAEnD,QAAO;EAAE;EAAM;EAAO"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@motiadev/stream-client-react",
   "description": "Motia Stream Client React Package – Responsible for managing streams of data.",
-  "version": "0.15.6-beta.174",
+  "version": "0.16.0-beta.175",
   "license": "Elastic-2.0",
   "type": "module",
   "main": "./dist/index.js",
@@ -11,7 +11,7 @@
     "react": "^19.1.0"
   },
   "dependencies": {
-    "@motiadev/stream-client-browser": "0.15.6-beta.174"
+    "@motiadev/stream-client-browser": "0.16.0-beta.175"
   },
   "devDependencies": {
     "@types/react": "^19.0.7",

package/src/use-stream-group.ts

@@ -1,11 +1,12 @@
 import type { StreamSubscription } from '@motiadev/stream-client-browser'
-import { useCallback, useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { useMotiaStream } from './use-motia-stream'
 
 export type StreamGroupArgs<TData extends { id: string }> = {
   streamName: string
   groupId: string
   sortKey?: keyof TData
+  setData?: (data: TData[]) => void
 }
 
 /**
@@ -30,28 +31,27 @@ export type StreamGroupArgs<TData extends { id: string }> = {
 export const useStreamGroup = <TData extends { id: string }>(args?: StreamGroupArgs<TData>) => {
   const { stream } = useMotiaStream()
   const [data, setData] = useState<TData[]>([])
-  const [event, setEvent] = useState<StreamSubscription | null>(null)
+  const subscriptionRef = useRef<StreamSubscription | null>(null)
 
-  const { streamName, groupId, sortKey } = args || {}
-
-  const handleChange = useCallback((data: unknown) => {
-    setData(data as TData[])
-  }, [])
+  const { streamName, groupId, sortKey, setData: setDataCallback } = args || {}
 
   useEffect(() => {
     if (!streamName || !groupId || !stream) return
 
-    const subscription = stream.subscribeGroup(streamName, groupId, sortKey)
+    subscriptionRef.current = stream.subscribeGroup(streamName, groupId, sortKey)
 
-    subscription.addChangeListener(handleChange)
-    setEvent(subscription)
+    subscriptionRef.current.addChangeListener((data) => {
+      const typedData = data as TData[]
+      setData(typedData)
+      setDataCallback?.(typedData)
+    })
 
     return () => {
+      subscriptionRef.current?.close()
+      subscriptionRef.current = null
       setData([])
-      setEvent(null)
-      subscription.close()
     }
-  }, [stream, streamName, groupId, sortKey, handleChange])
+  }, [stream, streamName, groupId, sortKey, setDataCallback])
 
-  return { data, event }
+  return { data, event: subscriptionRef.current }
 }