Root Provider hydration vs lazy-mounted Providers for incremental Redux Toolkit adoption

State Migration Strategy

A small React application is migrating from local component state to Redux Toolkit. To maintain zero-downtime deployments, the migration must support a hybrid state model where some features use the global store while others remain on local state.

Integration Patterns

Two documented patterns are under consideration for this rollout:

• Root Provider with preloadedState: Wrapping the entire application in a single Provider. This ensures a single source of truth and simplifies debugging via Redux DevTools, but requires a consistent store shape across deployments to avoid hydration mismatches.
• Lazy-mounted Providers: Wrapping only specific feature routes in their own Provider. This isolates Redux logic to new features, ensuring legacy UI remains untouched, but introduces Provider nesting and potential prop-drilling complexities.

Transient State Ownership

There is an unresolved design decision regarding transient UI state. Moving this state to Redux increases testability but adds boilerplate and may trigger unnecessary re-renders. Keeping it local preserves simplicity but fragments the state logic across the codebase.

Which pattern better supports a gradual rollout without risking state inconsistency? Should transient UI state be migrated to the global store or remain local during an incremental transition?