Skip to content

Fixed RemyAssistant.tsx - Where useeffect causes destroy is not a function error #446

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
killerfrienddk wants to merge 1 commit into
base: main
Choose a base branch
from
+4 −7
Open

Fixed RemyAssistant.tsx - Where useeffect causes destroy is not a function error #446

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 4 additions & 7 deletions packages/create/src/frameworks/react/examples/events/assets/src/components/RemyAssistant.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,13 +88,10 @@ export default function RemyAssistant({
const [isOpen, setIsOpen] = useState(false)
const { messages, sendMessage, isLoading } = useConferenceChat(speakerSlug, talkSlug)
const [input, setInput] = useState('')

// Sync with store for header control
useEffect(() => {
return showRemyAssistant.subscribe(() => {
setIsOpen(showRemyAssistant.state)
})
}, [])

showRemyAssistant.subscribe(() => {
setIsOpen(showRemyAssistant.state)
})
Comment on lines +91 to +94
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot May 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# 1. Find the `@tanstack/store` version pinned in this template/package.
fd -t f 'package.json' packages/create/src/frameworks/react/examples/events | xargs -I{} sh -c 'echo "=== {} ==="; cat {}'

# 2. Search the whole repo for any other usages of `.subscribe(` on a TanStack Store to see how cleanup is handled elsewhere.
rg -nP --type=ts --type=tsx -C3 '\.subscribe\s*\(' -g '!**/node_modules/**'

# 3. See if `@tanstack/react-store` and its `useStore` hook are already a dependency anywhere in the template.
rg -nP -C2 '@tanstack/react-store' -g '!**/node_modules/**'

Repository: TanStack/cli

Length of output: 50416

🌐 Web query:

What does Store.subscribe return in @tanstack/store — a bare unsubscribe function or a Subscription object with an unsubscribe() method? Include the version where this changed if applicable.

💡 Result:

In @tanstack/store, Store.subscribe returns a Subscription object with an unsubscribe method (not a bare unsubscribe function). This is shown in the Subscription interface and in the Store.subscribe return type/usage examples. [1][2][3] Version where this changed (if applicable): In the 0.9.0 release, there was a breaking change noting “new Effect removed in favor of store.subscribe”, and the example shows that store.subscribe returns { unsubscribe } (i.e., a Subscription object). [4]

Citations:

🏁 Script executed:

cat -n packages/create/src/frameworks/react/examples/events/assets/src/components/RemyAssistant.tsx | head -100 | tail -30

Repository: TanStack/cli

Length of output: 964

Critical: subscription in component body creates unbounded leak with exponential re-render risk.

Calling showRemyAssistant.subscribe(...) directly in the component body has serious problems:

  1. Subscription leak on every render. The subscription is registered on each render and never removed. Listener count grows without bound.
  2. Exponential re-render loop. Each listener calls setIsOpen, triggering a re-render, which registers another listener. Every store change then fires setIsOpen N times (where N = number of accumulated listeners).
  3. No unmount cleanup. After the component unmounts, leaked listeners keep firing setIsOpen on a dead component.
  4. Doesn't fix the root cause. The original destroy is not a function error occurred because subscribe() returns a Subscription object with an unsubscribe() method, not a bare function. React tried to invoke the returned object as the cleanup function, causing the error. The real fix is to properly call .unsubscribe() in cleanup, not to skip cleanup entirely.

Use useEffect with proper cleanup that calls .unsubscribe() on the returned Subscription object. Alternatively, add @tanstack/react-store as a dependency and use the useStore hook (which handles subscription and cleanup automatically), eliminating the duplicate local state.

🛠️ Quickest fix: add useEffect with proper cleanup 
+  useEffect(() => {
+    const sub = showRemyAssistant.subscribe(() => {
+      setIsOpen(showRemyAssistant.state)
+    })
+    return () => sub.unsubscribe()
+  }, [])
-  
-  showRemyAssistant.subscribe(() => {
-    setIsOpen(showRemyAssistant.state)
-  })
🛠️ Preferred fix: use `useStore` and drop duplicated state

Requires adding @tanstack/react-store to dependencies (as in the ecommerce example).

-import { useEffect, useRef, useState } from 'react'
+import { useRef, useState } from 'react'
 import { Send, X, ChefHat, Croissant } from 'lucide-react'
 import { Streamdown } from 'streamdown'
 import { Store } from '@tanstack/store'
+import { useStore } from '@tanstack/react-store'
@@
-  const [isOpen, setIsOpen] = useState(false)
   const { messages, sendMessage, isLoading } = useConferenceChat(speakerSlug, talkSlug)
   const [input, setInput] = useState('')
-  
-  showRemyAssistant.subscribe(() => {
-    setIsOpen(showRemyAssistant.state)
-  })
+
+  const isOpen = useStore(showRemyAssistant)
@@
   const handleToggle = () => {
-    const newState = !isOpen
-    setIsOpen(newState)
-    showRemyAssistant.setState(() => newState)
+    showRemyAssistant.setState((prev) => !prev)
   }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
showRemyAssistant.subscribe(() => {
setIsOpen(showRemyAssistant.state)
})
useEffect(() => {
const sub = showRemyAssistant.subscribe(() => {
setIsOpen(showRemyAssistant.state)
})
return () => sub.unsubscribe()
}, [])
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@packages/create/src/frameworks/react/examples/events/assets/src/components/RemyAssistant.tsx`
around lines 91 - 94, The component currently calls
showRemyAssistant.subscribe(...) in the component body causing listener leaks
and render storms; move the subscription into a useEffect that runs on mount,
capture the returned Subscription and call subscription.unsubscribe() in the
effect cleanup, and keep setIsOpen inside the subscription callback;
alternatively (preferred) import and use the `@tanstack/react-store` useStore hook
to subscribe automatically and remove the duplicated local state and manual
subscribe/unsubscribe logic (references: showRemyAssistant, setIsOpen,
subscribe, unsubscribe, useEffect, useStore).


const handleToggle = () => {
const newState = !isOpen
Expand Down