Dont dispatch on every event

speechmatics · Dec 4, 2024 · 1034d7f · 1034d7f
1 parent 75eb114
commit 1034d7f
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 9 deletions.
diff --git a/examples/nextjs/next.config.ts b/examples/nextjs/next.config.ts
@@ -2,6 +2,7 @@ import type { NextConfig } from 'next';
 
 const nextConfig: NextConfig = {
   /* config options here */
+  reactStrictMode: false,
 };
 
 export default nextConfig;
diff --git a/examples/nextjs/src/app/flow/OutputView.tsx b/examples/nextjs/src/app/flow/OutputView.tsx
@@ -1,11 +1,22 @@
+'use client';
 import { useErrorBoundary } from 'react-error-boundary';
-import { useFlowEventListener } from '@speechmatics/flow-client-react';
+import {
+  type Message,
+  useFlowEventListener,
+} from '@speechmatics/flow-client-react';
 import { useFlowTranscript } from '@speechmatics/flow-client-react';
+import { useRef } from 'react';
 
 export function OutputView() {
   useErrorView();
 
+  console.log('RENDER');
+
   const { messages, handleEvent } = useFlowTranscript();
+  // lastMessagesRef.current ??= messages;
+  // console.log(messages === lastMessagesRef.current);
+
+  // console.log('messages=', messages);
 
   useFlowEventListener('message', ({ data }) => {
     if (
@@ -21,7 +32,7 @@ export function OutputView() {
   return (
     <article>
       <header>Output</header>
-      <section>
+      {/* <section>
         {messages.map((message) => (
           <article key={`${message.startTime}-${message.endTime}`}>
             <header>{message.speaker}</header>
@@ -31,7 +42,7 @@ export function OutputView() {
             </span>
           </article>
         ))}
-      </section>
+      </section> */}
     </article>
   );
 }

diff --git a/packages/flow-client-react/package.json b/packages/flow-client-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@speechmatics/flow-client-react",
-  "version": "0.1.2-rc4",
+  "version": "0.1.2-rc5",
   "description": "React hooks for interacting with the Speechmatics Flow API",
   "main": "dist/index.cjs",
   "module": "dist/index.js",

diff --git a/packages/flow-client-react/src/use-flow-transcript.tsx b/packages/flow-client-react/src/use-flow-transcript.tsx
@@ -1,19 +1,28 @@
+'use client';
 import type {
   AddPartialTranscriptMessage,
   AddTranscriptMessage,
   ResponseCompletedMessage,
   ResponseStartedMessage,
   ResponseInterruptedMessage,
 } from '@speechmatics/flow-client';
-import { useReducer } from 'react';
+import { useCallback, useMemo, useReducer } from 'react';
 
 export function useFlowTranscript() {
   const [state, dispatch] = useReducer(messagesReducer, []);
 
-  return {
-    messages: state,
-    handleEvent: dispatch,
-  };
+  const handleEvent = useCallback((ev: IncomingEvent) => {
+    if (!eventIsEmpty(ev)) {
+      dispatch(ev);
+    }
+  }, []);
+
+  return useMemo(() => {
+    return {
+      messages: state,
+      handleEvent,
+    };
+  }, [state, handleEvent]);
 }
 
 export type Message = {