@blinkdotnew/sdk 0.14.4 → 0.14.5

package/README.md

@@ -1263,6 +1263,72 @@ All `{{secret_name}}` placeholders are replaced with encrypted values from your
 
 ## 🌍 Framework Examples
 
+### React + Realtime Connections
+
+**⚠️ Critical: Avoid Multiple WebSocket Connections**
+
+```typescript
+// ❌ WRONG - Creates new connection on every user change
+useEffect(() => {
+  const channel = blink.realtime.channel('room')
+  await channel.subscribe({ userId: user.id, metadata: { name: user.name } })
+  return () => channel.unsubscribe()
+}, [user]) // ❌ Full user object dependency causes reconnections
+```
+
+```typescript
+// ✅ CORRECT - Single stable connection
+const userRef = useRef(user)
+const [isConnected, setIsConnected] = useState(false)
+
+useEffect(() => { userRef.current = user }, [user])
+
+useEffect(() => {
+  if (!user?.id) return
+  
+  const channel = blink.realtime.channel('room')
+  let isMounted = true, isSubscribed = false
+  
+  const setup = async () => {
+    if (!isMounted) return
+    try {
+      await channel.subscribe({ 
+        userId: userRef.current.id, 
+        metadata: { name: userRef.current.name } 
+      })
+      if (!isMounted) return
+      isSubscribed = true
+      setIsConnected(true)
+      
+      channel.onMessage((msg) => {
+        if (!isMounted) return
+        // handle message
+      })
+    } catch (error) {
+      console.error('Connection failed:', error)
+    }
+  }
+  
+  setup()
+  return () => {
+    isMounted = false
+    setIsConnected(false)
+    if (isSubscribed) channel.unsubscribe()
+  }
+}, [user.id]) // ✅ Only user.id dependency
+
+// Only publish when connected
+if (isConnected) {
+  await blink.realtime.publish('room', 'message', data)
+}
+```
+
+**Rules:**
+1. **useEffect dependency**: `[user.id]` not `[user]`
+2. **Use useRef**: Store user data to avoid re-connections
+3. **Add isMounted**: Prevent operations on unmounted components
+4. **Track connection state**: Only publish when actually connected
+
 ### React
 
 ```typescript

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blinkdotnew/sdk",
-  "version": "0.14.4",
+  "version": "0.14.5",
   "description": "Blink TypeScript SDK for client-side applications - Zero-boilerplate CRUD + auth + AI + analytics + notifications for modern SaaS/AI apps",
   "keywords": [
     "blink",