langchain-ai/langgraph
1
0
Fork 0
mirror of https://github.com/langchain-ai/langgraph.git synced 2026-07-15 12:35:43 -04:00
Code Issues 314 Packages Projects Releases 17 Wiki Activity

[PR #5111] feat(react): enhance useStream with initialValues, newThreadId, and onStop callback for improved UX #4245

New Issue
Closed
opened 2026-02-20 17:49:53 -05:00 by yindo · 0 comments
yindo commented 2026-02-20 17:49:53 -05:00
Owner
Copy Link
Copy Source

Original Pull Request: https://github.com/langchain-ai/langgraph/pull/5111

State: closed
Merged: Yes

Summary

Adds three new options to the useStream React hook to improve user experience in common chat application scenarios:

  • initialValues: Display cached thread data immediately while history loads
  • newThreadId: Enable optimistic thread creation with predetermined IDs
  • onStop: Customize UI behavior when streams are stopped/cancelled

Features Added

initialValues Option

  • Shows cached thread data instantly when navigating to existing threads
  • Improves perceived performance by eliminating loading states for cached content
  • Values priority: streamValues > initialValues > historyValues
  • Backward compatible

newThreadId Option

  • Enables optimistic UI patterns for thread creation
  • Prevents 404 errors when automatically fetching thread history when navigating to routes before thread exists
  • Allows predetermined thread IDs for better URL management in practice (e.g. when navigating to /[threadId] routes when submitting a message)
  • Works with threadId: null for new thread creation

onStop Callback

  • Enables custom behavior when streams are stopped or cancelled
  • Provides immediate local state updates via mutate function
  • Particularly useful for handling loading states in generative UI components
  • Prevents loading components from remaining in infinite loading state after cancellation
  • Supports optional server thread state updates
const stream = useStream({
  assistantId: "my-assistant",
  onStop: async ({ mutate }) => {
    // Immediate UI update - stop loading components
    mutate((prev) => ({
      ...prev,
      ui: prev.ui?.map(component =>
        component.props?.isLoading
          ? {
              ...component,
              props: {
                ...component.props,
                isLoading: false,
                isStopped: true
              }
            }
          : component
      )
    }));

    // Optional server thread state update
    if (stream.threadId) {
      await stream.client.threads.updateState(stream.threadId, {
        values: { ui: prev.ui }
      });
    }
  }
});

Documentation & Testing

  • Added comprehensive documentation with examples for all features
  • Test coverage for initialValues, newThreadId, and onStop callback
  • Updated React integration guide
  • Clean test implementation with proper cleanup

Use Cases

  • Cached display: Show cached thread data while server loads
  • Optimistic navigation: Navigate to /threads/[id] before thread creation
  • Better UX: Eliminate loading states and navigation delays
  • Graceful cancellation: Handle stopped streams with custom UI updates
  • Generative UI: Properly manage loading states in dynamic components

Breaking Changes

None - all three options are optional and fully backward compatible.

**Original Pull Request:** https://github.com/langchain-ai/langgraph/pull/5111 **State:** closed **Merged:** Yes --- ## Summary Adds three new options to the `useStream` React hook to improve user experience in common chat application scenarios: - **`initialValues`**: Display cached thread data immediately while history loads - **`newThreadId`**: Enable optimistic thread creation with predetermined IDs - **`onStop`**: Customize UI behavior when streams are stopped/cancelled ## Features Added ### `initialValues` Option - Shows cached thread data instantly when navigating to existing threads - Improves perceived performance by eliminating loading states for cached content - Values priority: `streamValues > initialValues > historyValues` - Backward compatible ### `newThreadId` Option - Enables optimistic UI patterns for thread creation - Prevents 404 errors when automatically fetching thread history when navigating to routes before thread exists - Allows predetermined thread IDs for better URL management in practice (e.g. when navigating to `/[threadId]` routes when submitting a message) - Works with `threadId: null` for new thread creation ### `onStop` Callback - Enables custom behavior when streams are stopped or cancelled - Provides immediate local state updates via `mutate` function - Particularly useful for handling loading states in generative UI components - Prevents loading components from remaining in infinite loading state after cancellation - Supports optional server thread state updates ```typescript const stream = useStream({ assistantId: "my-assistant", onStop: async ({ mutate }) => { // Immediate UI update - stop loading components mutate((prev) => ({ ...prev, ui: prev.ui?.map(component => component.props?.isLoading ? { ...component, props: { ...component.props, isLoading: false, isStopped: true } } : component ) })); // Optional server thread state update if (stream.threadId) { await stream.client.threads.updateState(stream.threadId, { values: { ui: prev.ui } }); } } }); ``` ## Documentation & Testing - Added comprehensive documentation with examples for all features - Test coverage for `initialValues`, `newThreadId`, and `onStop` callback - Updated React integration guide - Clean test implementation with proper cleanup ## Use Cases - **Cached display**: Show cached thread data while server loads - **Optimistic navigation**: Navigate to `/threads/[id]` before thread creation - **Better UX**: Eliminate loading states and navigation delays - **Graceful cancellation**: Handle stopped streams with custom UI updates - **Generative UI**: Properly manage loading states in dynamic components ## Breaking Changes None - all three options are optional and fully backward compatible.
yindo added the pull-request label 2026-02-20 17:49:53 -05:00
yindo closed this issue 2026-02-20 17:49:53 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
agents
awaiting author revision
bug
change
chat models
checkpointer
ci
code quality
code quality
dependencies
documentation
drawing
duplicate
enhancement
good first issue
help wanted
invalid
maintainer
meta
missing information
not maintained by langchain
open-swe-auto
open-swe-max
open-swe-max-auto
pending
performance
pull-request
Mirrored from GitHub Pull Request
 question
requires design
sdk
server
stale
studio
tests
type checking
usage question
v0.5
v1.1
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: langchain-ai/langgraph#4245
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?