Fixed RemyAssistant.tsx - Where useeffect causes destroy is not a function error#446
Fixed RemyAssistant.tsx - Where useeffect causes destroy is not a function error#446killerfrienddk wants to merge 1 commit intoTanStack:mainfrom
Conversation
… a function error
📝 WalkthroughWalkthroughThe RemyAssistant component's store subscription was moved from within a useEffect hook (with cleanup) to an unconditional subscription call in the component body, eliminating the previous unsubscribe mechanism on unmount. ChangesStore Subscription Lifecycle
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with 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.
Inline comments:
In
`@packages/create/src/frameworks/react/examples/events/assets/src/components/RemyAssistant.tsx`:
- Around line 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).
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: de3939c1-82ac-4a01-87fa-e785d35e0ced
📒 Files selected for processing (1)
packages/create/src/frameworks/react/examples/events/assets/src/components/RemyAssistant.tsx
|
|
||
| showRemyAssistant.subscribe(() => { | ||
| setIsOpen(showRemyAssistant.state) | ||
| }) |
There was a problem hiding this comment.
🧩 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:
- 1: https://tanstack.com/store/v0/docs/reference/classes/Store
- 2: https://tanstack.com/store/v0/docs/reference/interfaces/Subscription
- 3: https://mintlify.com/TanStack/store/api/core/store-class
- 4: https://tanstack.com/feed/github%3Atanstack%2Fstore%3A%40tanstack%2Fstore%400.9.0
🏁 Script executed:
cat -n packages/create/src/frameworks/react/examples/events/assets/src/components/RemyAssistant.tsx | head -100 | tail -30Repository: 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:
- Subscription leak on every render. The subscription is registered on each render and never removed. Listener count grows without bound.
- Exponential re-render loop. Each listener calls
setIsOpen, triggering a re-render, which registers another listener. Every store change then firessetIsOpenN times (where N = number of accumulated listeners). - No unmount cleanup. After the component unmounts, leaked listeners keep firing
setIsOpenon a dead component. - Doesn't fix the root cause. The original
destroy is not a functionerror occurred becausesubscribe()returns aSubscriptionobject with anunsubscribe()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.
| 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).
1 participant
Reproduction:
I changed:
useEffect(() => { return showRemyAssistant.subscribe(() => { setIsOpen(showRemyAssistant.state) }) }, [])to:
showRemyAssistant.subscribe(() => { setIsOpen(showRemyAssistant.state) })Summary by CodeRabbit