fix caching

Author: erich2s

.changeset/nice-trees-joke.md

@@ -0,0 +1,5 @@
+---
+"react-mqtt-hooks": patch
+---
+
+fix caching

example/src/App.tsx

@@ -1,6 +1,7 @@
 import { Badge } from "@/components/ui/badge";
 import { MqttConnector } from "react-mqtt-hooks";
 import ConnectionStatus from "./components/connection-status";
+import Demo from "./components/demo";
 import MultiTopicsCard from "./components/multi-topics-card";
 import SingleTopicCard from "./components/single-topic-card";
 import { Button } from "./components/ui/button";
@@ -24,7 +25,7 @@ function App() {
                 <span className="font-bold">{MQTT_URL}</span>
               </Badge>
             </div>
-            <p className="">
+            <p>
               You can now publish message to topic
               {" "}
               <span className="px-1.5 py-0.5 bg-zinc-200 rounded-lg font-mono font-medium">chat/1</span>
@@ -62,6 +63,7 @@ function App() {
           <MultiTopicsCard />
         </main>
 
+        <Demo />
       </div>
     </MqttConnector>
   );

example/src/components/demo.tsx

@@ -0,0 +1,20 @@
+import { useState } from "react";
+import SingleTopicCard from "./single-topic-card";
+import { Button } from "./ui/button";
+
+export default function Demo() {
+  const [show, setShow] = useState(false);
+  return (
+    <section className="space-y-2">
+
+      <p>
+        Component mount/unmount should get the data from cache.
+      </p>
+      <Button onClick={() => setShow(!show)} variant="outline" size="lg">
+        {show ? "Hide" : "Show"}
+      </Button>
+
+      {show && <SingleTopicCard topic="chat/1" />}
+    </section>
+  );
+}

src/hooks/use-topic.ts

@@ -21,6 +21,12 @@ export default function useTopic<T = any>(topic: string | null) {
       mqttClient.subscribe(topic);
     }
 
+    // when multiple components subscribe to the same topic, return the data from the cache
+    const cachedData = cache.getData<T>(topic);
+    if (cachedData) {
+      setData(cachedData);
+    }
+
     const handleDataUpdate = (newData: T) => {
       setData(newData);
     };