Summary
Explore and document React 19's useOptimistic and useActionState patterns for use with easy-peasy thunks and actions.
Parent issue: #1004
Background
React 19 introduces useOptimistic for optimistic UI updates and useActionState for form-based action state management. Both have natural synergies with easy-peasy's thunk pattern.
Areas to explore
1. useOptimistic integration
- Natural fit for thunk-based patterns: optimistically apply a state change, then reconcile when the thunk resolves or roll back on failure
- Could provide a
useStoreOptimistic(selector, applyOptimistic) hook
- Challenge: Deep integration would require easy-peasy to expose a way to "preview" state changes without committing, which isn't trivially compatible with the Redux dispatch model
- May be more practical as a documented pattern showing how to compose
useOptimistic with useStoreState
2. useActionState patterns
- Designed for form actions with server/client transitions, returning
[state, formAction, isPending]
- easy-peasy thunks could be wrapped in
useActionState for form submission patterns
- This is primarily a consumer-side concern — may not require library changes
- Document recommended patterns for combining
useActionState with easy-peasy actions
Deliverables
- Evaluate whether library-level hooks are warranted or if documentation/examples suffice
- If hooks are warranted, implement with factory creators and TypeScript definitions
- Add documentation/examples showing integration patterns
- Consider adding to the easy-peasy website/docs
Testing
- Test optimistic update + rollback patterns with async thunks
- Test
useActionState wrapping of easy-peasy actions in form contexts
- Verify patterns work correctly with React 19 concurrent features
Summary
Explore and document React 19's
useOptimisticanduseActionStatepatterns for use with easy-peasy thunks and actions.Parent issue: #1004
Background
React 19 introduces
useOptimisticfor optimistic UI updates anduseActionStatefor form-based action state management. Both have natural synergies with easy-peasy's thunk pattern.Areas to explore
1.
useOptimisticintegrationuseStoreOptimistic(selector, applyOptimistic)hookuseOptimisticwithuseStoreState2.
useActionStatepatterns[state, formAction, isPending]useActionStatefor form submission patternsuseActionStatewith easy-peasy actionsDeliverables
Testing
useActionStatewrapping of easy-peasy actions in form contexts