fix: rerender chat component #5805
Conversation
|
@Dogtiti is attempting to deploy a commit to the NextChat Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThe changes introduce a new property, Changes
Possibly related PRs
Suggested reviewers
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
修复：新增聊天总是将currentSessionIndex设置为0 导致key没有变化所以组件没有重新卸载渲染导致的一系列相关问题 |
|
Your build has completed! |
Fix: When adding a new chat, the currentSessionIndex is always set to 0. As a result, the key does not change, so the component is not re-unloaded and rendered, resulting in a series of related problems. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (3)
app/store/chat.ts (3)
242-245: Consider optimizing re-render behavior in selectSessionWhile updating
forceUpdateKeyensures the UI reflects the newly selected session, it might cause unnecessary re-renders when switching between sessions that haven't changed. Consider updating the key only when the session content has actually changed since the last selection.selectSession(index: number) { + const prevSession = get().currentSession(); + const nextSession = get().sessions[index]; set({ currentSessionIndex: index, - forceUpdateKey: Date.now(), + forceUpdateKey: prevSession?.id !== nextSession?.id ? Date.now() : get().forceUpdateKey, }); },
Line range hint
328-344: Fix potential stale UI state after undo in deleteSessionThe
restoreStateobject doesn't include theforceUpdateKey, which could lead to stale UI state when undoing a session deletion. The UI might not properly reflect the restored session.Apply this fix:
const restoreState = { currentSessionIndex: get().currentSessionIndex, sessions: get().sessions.slice(), + forceUpdateKey: Date.now(), }; set(() => ({ currentSessionIndex: nextIndex, sessions, forceUpdateKey: Date.now(), })); showToast( Locale.Home.DeleteToast, { text: Locale.Home.Revert, onClick() { - set(() => restoreState); + set(() => ({ + ...restoreState, + forceUpdateKey: Date.now(), + })); }, }, 5000, );
196-196: Consider implementing a more granular re-render strategyWhile using
forceUpdateKeyeffectively solves the chat component re-rendering issue, consider implementing a more granular strategy to minimize unnecessary re-renders:
- Track individual session changes using a version or timestamp per session
- Only update the force key when the active session's content changes
- Use React's useMemo or useCallback for expensive computations
This would improve performance by avoiding full re-renders when only metadata changes.
Also applies to: 229-229, 237-237, 244-244, 269-269, 294-294, 334-334
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
app/components/chat.tsx(1 hunks)app/store/chat.ts(5 hunks)
🔇 Additional comments (6)
app/store/chat.ts (5)
196-196: LGTM: Good use of timestamp for force update mechanism
Using Date.now() as the initial value for forceUpdateKey is a good choice as it ensures a unique value for the first render.
229-229: LGTM: Proper state update in forkSession
The forceUpdateKey update is correctly placed after the session state changes, ensuring the UI reflects the new forked session.
237-237: LGTM: Proper state reset in clearSessions
The forceUpdateKey update is correctly included in the state reset, ensuring the UI refreshes when all sessions are cleared.
269-269: LGTM: Proper state update in moveSession
The forceUpdateKey update is correctly included in the state update when reordering sessions.
294-294: LGTM: Proper state update in newSession
The forceUpdateKey update is correctly included when creating a new session.
app/components/chat.tsx (1)
2074-2075: LGTM! The re-rendering fix looks correct.
The change replaces sessionIndex with forceUpdateKey from the chat store to properly trigger re-renders of the _Chat component when needed. This is a good fix that follows React best practices for forcing component updates.
|
💻 变更类型 | Change Type
🔀 变更说明 | Description of Change
📝 补充信息 | Additional Information
Summary by CodeRabbit
New Features
forceUpdateKey, improving responsiveness to state changes.Bug Fixes