Skip to content

feat(react19): useOptimistic integration and useActionState patterns for thunks #1017

@ctrlplusb

Description

@ctrlplusb

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

Metadata

Metadata

Assignees

Labels

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions