Skip to content

Implement STATE_DELTA for partial state updates#52

Merged
MarcosBrendonDePaula merged 2 commits intomainfrom
claude/live-component-delta-update-AxPnV
Feb 12, 2026
Merged

Implement STATE_DELTA for partial state updates#52
MarcosBrendonDePaula merged 2 commits intomainfrom
claude/live-component-delta-update-AxPnV

Conversation

@MarcosBrendonDePaula
Copy link
Copy Markdown
Collaborator

Summary

This PR introduces a new STATE_DELTA message type to optimize WebSocket payload size by sending only changed state properties instead of the full state object on every mutation.

Key Changes

  • New message type: Added STATE_DELTA to LiveMessage and WebSocketResponse types in types.ts
  • Proxy-based delta tracking: Modified the state proxy in LiveComponent to emit STATE_DELTA with only the changed property instead of full STATE_UPDATE
  • Batch update optimization: Updated setState() method to emit STATE_DELTA containing only the properties that were actually modified
  • Client-side handling: Added STATE_DELTA case in useLiveComponent hook to merge delta updates with existing state
  • Comprehensive test coverage: Added 229 lines of unit tests validating delta emission for both proxy mutations and batch updates

Implementation Details

  • The state proxy now compares old and new values before emitting, preventing unnecessary messages when values don't change
  • setState() emits a single STATE_DELTA message with all batch updates, reducing message count for multi-property changes
  • Delta updates are merged on the client side using object spread syntax to maintain full state consistency
  • Message format includes componentId and timestamp for proper routing and debugging
  • Tests validate that unchanged properties are not included in delta payloads, confirming payload size reduction

https://claude.ai/code/session_01HB4ENmFebWTsco9UMa1z3D

Instead of sending the entire state object on every mutation,
Live Components now emit STATE_DELTA with only the changed
properties. This reduces WebSocket payload size and bandwidth
usage, especially for components with large state objects.

- Server proxy set trap: emits delta with single changed property
- Server setState(): emits delta with partial updates
- Client: merges STATE_DELTA into existing state via shallow merge
- Full STATE_UPDATE preserved for mount/rehydrate scenarios

https://claude.ai/code/session_01HB4ENmFebWTsco9UMa1z3D
16 tests covering:
- Proxy set emits STATE_DELTA with only changed property
- setState emits STATE_DELTA with partial updates (single message)
- No emit when value is unchanged
- Function updater form support
- Internal state consistency after delta mutations
- Action-driven state changes via proxy and setState
- Message format (componentId, timestamp)

https://claude.ai/code/session_01HB4ENmFebWTsco9UMa1z3D
@MarcosBrendonDePaula MarcosBrendonDePaula merged commit 2f4961b into main Feb 12, 2026
11 checks passed
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.

2 participants