chore: update react example code

Author: jjarvisp

src/pages/[platform]/build-a-backend/data/connect-event-api/index.mdx

@@ -41,61 +41,69 @@ Before you begin, you will need:
 - Take note of: HTTP endpoint, region, API Key
 
 ```tsx title="src/App.tsx"
-import type { EventsChannel } from 'aws-amplify/data';
-import { useState, useEffect } from 'react';
-import { Amplify } from 'aws-amplify';
-import { events } from 'aws-amplify/data';
+import type { EventsChannel } from "aws-amplify/data";
+import { useState, useEffect, useRef } from "react";
+import { Amplify } from "aws-amplify";
+import { events } from "aws-amplify/data";
 
 Amplify.configure({
   API: {
     Events: {
       endpoint:
-        'https://abcdefghijklmnopqrstuvwxyz.appsync-api.us-east-1.amazonaws.com/event',
-      region: 'us-east-1',
-      defaultAuthMode: 'apiKey',
-      apiKey: 'da2-abcdefghijklmnopqrstuvwxyz'
-    }
-  }
+        "https://abcdefghijklmnopqrstuvwxyz.appsync-api.us-east-1.amazonaws.com/event",
+      region: "us-east-1",
+      defaultAuthMode: "apiKey",
+      apiKey: "da2-abcdefghijklmnopqrstuvwxyz",
+    },
+  },
 });
 
 export default function App() {
-  const [myEvents, setMyEvents] = useState<unknown[]>([]);
+ const [myEvents, setMyEvents] = useState<unknown[]>([]);
+
+  const sub = useRef<ReturnType<EventsChannel["subscribe"]>>(null);
 
   useEffect(() => {
     let channel: EventsChannel;
 
     const connectAndSubscribe = async () => {
-      channel = await events.connect('default/channel');
-
-      channel.subscribe({
-        next: (data) => {
-          console.log('received', data);
-          setMyEvents((prev) => [data, ...prev]);
-        },
-        error: (err) => console.error('error', err)
-      });
+      channel = await events.connect("default/channel");
+
+      if (!sub.current) {
+        sub.current = channel.subscribe({
+          next: (data) => {
+            console.log("received", data);
+            setMyEvents((prev) => [data, ...prev]);
+          },
+          error: (err) => console.error("error", err),
+        });
+      }
     };
 
     connectAndSubscribe();
 
-    return () => channel && channel.close();
+    return () => {
+      sub.current?.unsubscribe();
+      sub.current = null;
+      return channel?.close();
+    };
   }, []);
 
   async function publishEvent() {
     // Publish via HTTP POST
-    await events.post('default/channel', { some: 'data' });
+    await events.post("default/channel", { some: "data" });
 
     // Alternatively, publish events through the WebSocket channel
-    const channel = await events.connect('default/channel');
-    await channel.publish({ some: 'data' });
+    const channel = await events.connect("default/channel");
+    await channel.publish({ some: "data" });
   }
 
   return (
     <>
       <button onClick={publishEvent}>Publish Event</button>
       <ul>
-        {myEvents.map((data) => (
-          <li key={data.id}>{JSON.stringify(data.event)}</li>
+        {myEvents.map((data, idx) => (
+          <li key={idx}>{JSON.stringify(data.event, null, 2)}</li>
         ))}
       </ul>
     </>