SolidJS 2.0 Beta: First-Class Async, Reworked Suspense and Deterministic Batching
Summary
SolidJS, a fine-grained reactive JavaScript framework, has released SolidJS 2.0 Beta, significantly overhauling its async handling, reactivity model, and developer experience. Key enhancements include first-class async support, allowing computations to return Promises and the reactive graph to manage suspension and resumption automatically, alongside a redesigned `Loading` component and `isPending(() => expr)` for pending states. Mutations now feature dedicated primitives like `action()` and `createOptimisticStore` for optimistic updates and data revalidation. The release also introduces derived state through function forms like `createSignal(fn)` and `createStore(fn)`, with microtask-batched updates and deterministic scheduling. Several breaking changes are included, such as the replacement of `Index` with `<Index>`, `createEffect` split into phases, and `onMount` replaced by `onSettled`.
Key takeaway
For Software Engineers building high-performance web applications with SolidJS, the 2.0 Beta introduces critical changes that simplify async operations and ensure deterministic state management. You should review the migration guides for 1.x and SolidStart to understand the breaking changes and adopt the new first-class async and mutation primitives. Embracing these changes will lead to more concise and coherent application designs, potentially reducing the need for `createEffect` in many scenarios.
Key insights
SolidJS 2.0 introduces first-class async and deterministic batching for a more consistent and coherent reactive programming model.
Principles
- Async operations can be directly integrated into the reactive graph.
- Deterministic batching ensures consistent state updates.
- Optimistic updates improve perceived performance.
Method
SolidJS 2.0's approach involves passing Promises directly to `createMemo`, using `action()` for mutations, and leveraging `createOptimisticStore` for optimistic UI updates, with microtask-batched updates ensuring deterministic state changes.
In practice
- Pass Promises directly into `createMemo` for async handling.
- Use `action()` for server writes and data revalidation.
- Implement optimistic UI updates with `createOptimisticStore`.
Topics
- SolidJS 2.0 Beta
- First-Class Async
- Reworked Suspense
- Deterministic Batching
- Optimistic Updates
Code references
Best for: Software Engineer
Related on AIssential
Editorial summary, takeaway, and curation by AIssential. Original article published by InfoQ.