Skip to content

Conversation

@github-actions
Copy link
Contributor

@github-actions github-actions bot commented Jun 25, 2025

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.

Releases

@tanstack/[email protected]

Patch Changes

  • feat: implement Collection Lifecycle Management (#198)

    Adds automatic lifecycle management for collections to optimize resource usage.

    New Features:

    • Added startSync option (defaults to false, set to true to start syncing immediately)
    • Automatic garbage collection after gcTime (default 5 minutes) of inactivity
    • Collection status tracking: "idle" | "loading" | "ready" | "error" | "cleaned-up"
    • Manual preload() and cleanup() methods for lifecycle control

    Usage:

    const collection = createCollection({
      startSync: false, // Enable lazy loading
      gcTime: 300000, // Cleanup timeout (default: 5 minutes)
    })
    
    console.log(collection.status) // Current state
    await collection.preload() // Ensure ready
    await collection.cleanup() // Manual cleanup
  • Refactored the way we compute change events over the synced state and the optimistic changes. This fixes a couple of issues where the change events were not being emitted correctly. (#206)

  • Add createOptimisticAction helper that replaces useOptimisticMutation (#210)

    An example of converting a useOptimisticMutation hook to createOptimisticAction. Now all optimistic & server mutation logic are consolidated.

    -import { useOptimisticMutation } from '@tanstack/react-db'
    +import { createOptimisticAction } from '@tanstack/react-db'
    +
    +// Create the `addTodo` action, passing in your `mutationFn` and `onMutate`.
    +const addTodo = createOptimisticAction<string>({
    +  onMutate: (text) => {
    +    // Instantly applies the local optimistic state.
    +    todoCollection.insert({
    +      id: uuid(),
    +      text,
    +      completed: false
    +    })
    +  },
    +  mutationFn: async (text) => {
    +    // Persist the todo to your backend
    +    const response = await fetch('/api/todos', {
    +      method: 'POST',
    +      body: JSON.stringify({ text, completed: false }),
    +    })
    +    return response.json()
    +  }
    +})
    
     const Todo = () => {
    -  // Create the `addTodo` mutator, passing in your `mutationFn`.
    -  const addTodo = useOptimisticMutation({ mutationFn })
    -
       const handleClick = () => {
    -    // Triggers the mutationFn
    -    addTodo.mutate(() =>
    -      // Instantly applies the local optimistic state.
    -      todoCollection.insert({
    -        id: uuid(),
    -        text: '🔥 Make app faster',
    -        completed: false
    -      })
    -    )
    +    // Triggers the onMutate and then the mutationFn
    +    addTodo('🔥 Make app faster')
       }
    
       return <Button onClick={ handleClick } />
     }

@tanstack/[email protected]

Patch Changes

  • feat: implement Collection Lifecycle Management (#198)

    Adds automatic lifecycle management for collections to optimize resource usage.

    New Features:

    • Added startSync option (defaults to false, set to true to start syncing immediately)
    • Automatic garbage collection after gcTime (default 5 minutes) of inactivity
    • Collection status tracking: "idle" | "loading" | "ready" | "error" | "cleaned-up"
    • Manual preload() and cleanup() methods for lifecycle control

    Usage:

    const collection = createCollection({
      startSync: false, // Enable lazy loading
      gcTime: 300000, // Cleanup timeout (default: 5 minutes)
    })
    
    console.log(collection.status) // Current state
    await collection.preload() // Ensure ready
    await collection.cleanup() // Manual cleanup
  • Updated dependencies [945868e, 0f8a008, 57b5f5d]:

@tanstack/[email protected]

Patch Changes

  • feat: implement Collection Lifecycle Management (#198)

    Adds automatic lifecycle management for collections to optimize resource usage.

    New Features:

    • Added startSync option (defaults to false, set to true to start syncing immediately)
    • Automatic garbage collection after gcTime (default 5 minutes) of inactivity
    • Collection status tracking: "idle" | "loading" | "ready" | "error" | "cleaned-up"
    • Manual preload() and cleanup() methods for lifecycle control

    Usage:

    const collection = createCollection({
      startSync: false, // Enable lazy loading
      gcTime: 300000, // Cleanup timeout (default: 5 minutes)
    })
    
    console.log(collection.status) // Current state
    await collection.preload() // Ensure ready
    await collection.cleanup() // Manual cleanup
  • Add createOptimisticAction helper that replaces useOptimisticMutation (#210)

    An example of converting a useOptimisticMutation hook to createOptimisticAction. Now all optimistic & server mutation logic are consolidated.

    -import { useOptimisticMutation } from '@tanstack/react-db'
    +import { createOptimisticAction } from '@tanstack/react-db'
    +
    +// Create the `addTodo` action, passing in your `mutationFn` and `onMutate`.
    +const addTodo = createOptimisticAction<string>({
    +  onMutate: (text) => {
    +    // Instantly applies the local optimistic state.
    +    todoCollection.insert({
    +      id: uuid(),
    +      text,
    +      completed: false
    +    })
    +  },
    +  mutationFn: async (text) => {
    +    // Persist the todo to your backend
    +    const response = await fetch('/api/todos', {
    +      method: 'POST',
    +      body: JSON.stringify({ text, completed: false }),
    +    })
    +    return response.json()
    +  }
    +})
    
     const Todo = () => {
    -  // Create the `addTodo` mutator, passing in your `mutationFn`.
    -  const addTodo = useOptimisticMutation({ mutationFn })
    -
       const handleClick = () => {
    -    // Triggers the mutationFn
    -    addTodo.mutate(() =>
    -      // Instantly applies the local optimistic state.
    -      todoCollection.insert({
    -        id: uuid(),
    -        text: '🔥 Make app faster',
    -        completed: false
    -      })
    -    )
    +    // Triggers the onMutate and then the mutationFn
    +    addTodo('🔥 Make app faster')
       }
    
       return <Button onClick={ handleClick } />
     }
  • Updated dependencies [945868e, 0f8a008, 57b5f5d]:

@tanstack/[email protected]

Patch Changes

  • feat: implement Collection Lifecycle Management (#198)

    Adds automatic lifecycle management for collections to optimize resource usage.

    New Features:

    • Added startSync option (defaults to false, set to true to start syncing immediately)
    • Automatic garbage collection after gcTime (default 5 minutes) of inactivity
    • Collection status tracking: "idle" | "loading" | "ready" | "error" | "cleaned-up"
    • Manual preload() and cleanup() methods for lifecycle control

    Usage:

    const collection = createCollection({
      startSync: false, // Enable lazy loading
      gcTime: 300000, // Cleanup timeout (default: 5 minutes)
    })
    
    console.log(collection.status) // Current state
    await collection.preload() // Ensure ready
    await collection.cleanup() // Manual cleanup
  • Add createOptimisticAction helper that replaces useOptimisticMutation (#210)

    An example of converting a useOptimisticMutation hook to createOptimisticAction. Now all optimistic & server mutation logic are consolidated.

    -import { useOptimisticMutation } from '@tanstack/react-db'
    +import { createOptimisticAction } from '@tanstack/react-db'
    +
    +// Create the `addTodo` action, passing in your `mutationFn` and `onMutate`.
    +const addTodo = createOptimisticAction<string>({
    +  onMutate: (text) => {
    +    // Instantly applies the local optimistic state.
    +    todoCollection.insert({
    +      id: uuid(),
    +      text,
    +      completed: false
    +    })
    +  },
    +  mutationFn: async (text) => {
    +    // Persist the todo to your backend
    +    const response = await fetch('/api/todos', {
    +      method: 'POST',
    +      body: JSON.stringify({ text, completed: false }),
    +    })
    +    return response.json()
    +  }
    +})
    
     const Todo = () => {
    -  // Create the `addTodo` mutator, passing in your `mutationFn`.
    -  const addTodo = useOptimisticMutation({ mutationFn })
    -
       const handleClick = () => {
    -    // Triggers the mutationFn
    -    addTodo.mutate(() =>
    -      // Instantly applies the local optimistic state.
    -      todoCollection.insert({
    -        id: uuid(),
    -        text: '🔥 Make app faster',
    -        completed: false
    -      })
    -    )
    +    // Triggers the onMutate and then the mutationFn
    +    addTodo('🔥 Make app faster')
       }
    
       return <Button onClick={ handleClick } />
     }
  • Updated dependencies [945868e, 0f8a008, 57b5f5d]:

@tanstack/[email protected]

Patch Changes

@github-actions github-actions bot force-pushed the changeset-release/main branch from cdfff95 to 4662805 Compare June 26, 2025 13:14
@github-actions github-actions bot force-pushed the changeset-release/main branch from 4662805 to fb775f8 Compare June 26, 2025 18:09
Copy link
Collaborator

@KyleAMathews KyleAMathews left a comment

Choose a reason for hiding this comment

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

:shipit:

@KyleAMathews KyleAMathews merged commit acf1e9d into main Jun 26, 2025
@KyleAMathews KyleAMathews deleted the changeset-release/main branch June 26, 2025 18:11
cursor bot pushed a commit that referenced this pull request Jul 16, 2025
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant