SolidJS: Why All the Suspense?

Spanish audio is available in the player settings
Rate this content
Bookmark

Solid caught the eye of the frontend community by re-popularizing reactive programming with its compelling use of Signals to render without re-renders. We've seen them adopted in the past year in everything from Preact to Angular. Signals offer a powerful set of primitives that ensure that your UI is in sync with your state independent of components. A universal language for the frontend user interface.


But what about Async? How do we manage to orchestrate data loading and mutation, server rendering, and streaming? Ryan Carniato, creator of SolidJS, takes a look at a different primitive. One that is often misunderstood but is as powerful in its use. Join him as he shows what all the Suspense is about.

This talk has been presented at JSNation 2023, check out the latest edition of this JavaScript Conference.

FAQ

Suspense is a mechanism used in JavaScript frameworks to manage asynchronous state changes effectively. It creates boundaries in the view representation to ensure consistency during asynchronous operations, commonly implemented with loading spinners among other methods.

JavaScript frameworks maintain UI consistency by implementing reactive models that provide consistency guarantees. These models orchestrate state changes and data updates in a synchronous manner, ensuring the UI remains in sync with the underlying data.

Tearing is a form of async inconsistency that occurs when the UI state is not synchronized with the data state. An example is when switching tabs in an application, where the UI might briefly display content from the previous tab before updating to show the correct content.

To handle asynchronous inconsistencies, UI frameworks can use placeholders, maintain previous states until new data is fetched, or implement optimistic updates. These methods help in managing UI consistency while data is being fetched or updated asynchronously.

While Suspense provides a powerful tool for handling async operations, it is not a solution for all data fetching scenarios. It cannot prevent data fetching waterfalls and requires strategic data fetching placement higher in the component tree to function effectively.

Suspense is implemented differently across various JavaScript frameworks, each adapting the concept to fit their architectural models. For example, React and Solid use Suspense to manage async dependencies, but the implementation details can vary significantly.

Ryan Carniato
Ryan Carniato
28 min
01 Jun, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Suspense is a mechanism for orchestrating asynchronous state changes in JavaScript frameworks. It ensures async consistency in UIs and helps avoid trust erosion and inconsistencies. Suspense boundaries are used to hoist data fetching and create consistency zones based on the user interface. They can handle loading states of multiple resources and control state loading in applications. Suspense can be used for transitions, providing a smoother user experience and allowing prioritization of important content.

1. Introduction to Suspense in JavaScript Frameworks

Short description:

Suspense is a mechanism for orchestrating asynchronous state changes in JavaScript frameworks. It's a complicated area that has taken years of research to develop the best patterns for. JavaScript frameworks rely on synchronous execution guarantees to keep UIs in sync, but async introduces challenges. Reactivity is how frameworks keep the view in sync with data, aiming to avoid trust erosion and inconsistencies. An example from an introductory article explains the importance of avoiding manual subscriptions that can lead to out-of-sync UIs. The story of Facebook Messenger's bug highlights the annoyance and impact of inconsistent UI, overshadowing the launch of the app.

Actually, an intro to Solid Talk. It's talking about suspense. Suspense is a mechanism for orchestrating asynchronous state changes in JavaScript frameworks. You find it in React, Vue, and Solid, as I mentioned. And this is a complicated area. One that's taken years of research to develop the best patterns for. The reason being, JavaScript frameworks are built to keep UIs in sync. And they rely on guarantees that are based on synchronous execution. Async throws a wrench in it.

How do we ensure that UI is consistent in these conditions? Well, first, you have to understand what I mean by async. Sorry, consistency. This example is pulled from a introductory article explained the inner workings of his React library. Reactivity is basically how frameworks keep the view in sync with your data. Any system based on manual subscriptions was doomed to eventually get out of sync like what's displayed here. This is what all frameworks want to avoid.

Think of what happens when you see this. It erodes trust. You might not believe what you're seeing and be forced to reload the page. And it can persist in even more annoying ways than something that can be solved with a reload. In an early React talk, I remember rethinking web app development at Facebook. Jing Chen recounted the story of how Facebook Messenger had this bug that kept coming back. They fixed it. Sometimes painstakingly so because of how complicated the synchronization logic was. And at that time, Messenger was still part of the app. The bug was people would get these phantom notifications showing they had a message. And they had already seen or cleared all their messages. Seemingly simple annoyance. But as a user, you would think you would have a new message and you didn't. Having this happen multiple times a day, suddenly you would either just start ignoring it and you would miss actual messages or some of the more obsessive users would be full of perhaps disappointment and anxiety constantly clicking and seeing nothing. This seemingly harmless bug was so annoying for users, that whenever Facebook launched it was overshadowed by the demand for that.

2. Consistency Guarantees in Reactive Models

Short description:

Frameworks have consistency guarantees in reactive models, allowing us to trust in those guarantees. However, not all frameworks are the same, and each has a different idea of consistency. The answer to which model is more correct is not simple.

They would fix this bug. Not being able to depend on the software that you use can be crippling. Luckily, the concerns around this sort of thing, we have consistency guarantees in reactive models you find in UI frameworks. This allows us not to focus on those details and just trust in those guarantees.

However, not all frameworks are the same. But if you understand the rules, you can depend on them. This example was really fun for me. Basically, I took some state, I took some derived state, like count and double count, and I put that state in the DOM and I took a ref to that state in the DOM. And after I was in a click handler, I clicked it and I was like, console log all three values. As it turns out, every framework had a different idea of what that looked like. And honestly, a good argument could be made for this consistency model for each of them. So, you could debate among yourselves which one is more correct. The answer is not that simple.

QnA

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Building Better Websites with Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
React Compiler - Understanding Idiomatic React (React Forget)
React Advanced Conference 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
Top Content
Watch video: React Compiler - Understanding Idiomatic React (React Forget)
Joe Savona
Mofei Zhang
2 authors
The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.
Speeding Up Your React App With Less JavaScript
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Top Content
Watch video: Speeding Up Your React App With Less JavaScript
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
Full Stack Documentation
JSNation 2022JSNation 2022
28 min
Full Stack Documentation
Top Content
The Talk discusses the shift to full-stack frameworks and the challenges of full-stack documentation. It highlights the power of interactive tutorials and the importance of user testing in software development. The Talk also introduces learn.svelte.dev, a platform for learning full-stack tools, and discusses the roadmap for SvelteKit and its documentation.
React Query: It’s Time to Break up with your "Global State”!
React Summit Remote Edition 2020React Summit Remote Edition 2020
30 min
React Query: It’s Time to Break up with your "Global State”!
Top Content
Global state management and the challenges of placing server state in global state are discussed. React Query is introduced as a solution for handling asynchronous server state. The Talk demonstrates the process of extracting logic into custom hooks and fixing issues with state and fetching logic. Optimistic updates with mutation are showcased, along with the benefits of using React Query for data fetching and mutations. The future of global state management is discussed, along with user feedback on React Query. The Talk concludes with an invitation to explore React Query for server state management.
Managing React State: 10 Years of Lessons Learned
React Day Berlin 2023React Day Berlin 2023
16 min
Managing React State: 10 Years of Lessons Learned
Top Content
Watch video: Managing React State: 10 Years of Lessons Learned
This Talk focuses on effective React state management and lessons learned over the past 10 years. Key points include separating related state, utilizing UseReducer for protecting state and updating multiple pieces of state simultaneously, avoiding unnecessary state syncing with useEffect, using abstractions like React Query or SWR for fetching data, simplifying state management with custom hooks, and leveraging refs and third-party libraries for managing state. Additional resources and services are also provided for further learning and support.

Workshops on related topic

Rethinking Server State with React Query
React Summit 2020React Summit 2020
96 min
Rethinking Server State with React Query
Top Content
Featured Workshop
Tanner Linsley
Tanner Linsley
The distinction between server state and client state in our applications might be a new concept for some, but it is very important to understand when delivering a top-notch user experience. Server state comes with unique problems that often sneak into our applications surprise like:
- Sharing Data across apps- Caching & Persistence- Deduping Requests- Background Updates- Managing “Stale” Data- Pagination & Incremental fetching- Memory & Garbage Collection- Optimistic Updates
Traditional “Global State” managers pretend these challenges don’t exist and this ultimately results in developers building their own on-the-fly attempts to mitigate them.
In this workshop, we will build an application that exposes these issues, allows us to understand them better, and finally turn them from challenges into features using a library designed for managing server-state called React Query.
By the end of the workshop, you will have a better understanding of server state, client state, syncing asynchronous data (mouthful, I know), and React Query.
Building WebApps That Light Up the Internet with QwikCity
JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Featured WorkshopFree
Miško Hevery
Miško Hevery
Building instant-on web applications at scale have been elusive. Real-world sites need tracking, analytics, and complex user interfaces and interactions. We always start with the best intentions but end up with a less-than-ideal site.
QwikCity is a new meta-framework that allows you to build large-scale applications with constant startup-up performance. We will look at how to build a QwikCity application and what makes it unique. The workshop will show you how to set up a QwikCitp project. How routing works with layout. The demo application will fetch data and present it to the user in an editable form. And finally, how one can use authentication. All of the basic parts for any large-scale applications.
Along the way, we will also look at what makes Qwik unique, and how resumability enables constant startup performance no matter the application complexity.
Back to the Roots With Remix
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)
Fetch, useEffect, React Query, SWR, what else?
React Advanced Conference 2023React Advanced Conference 2023
102 min
Fetch, useEffect, React Query, SWR, what else?
Top Content
WorkshopFree
Ondrej Polesny
Ondrej Polesny
In this workshop, first, we’ll go over the different ways you can consume APIs in React. Then, we’ll test each one by fetching content from a headless CMS (with both REST and GraphQL) and checking in detail how they work.
While there is no advanced React knowledge required, this is going to be a hands-on session, so you’ll need to clone a preconfigured GitHub repository and utilize your preferred React programming editor, like VS Code.
You will learn:- What diverse data fetching options there are in React- What are advantages and disadvantages of each- What are the typical use cases and when each strategy is more beneficial than others
Let AI Be Your Docs
JSNation 2024JSNation 2024
69 min
Let AI Be Your Docs
Workshop
Jesse Hall
Jesse Hall
Join our dynamic workshop to craft an AI-powered documentation portal. Learn to integrate OpenAI's ChatGPT with Next.js 14, Tailwind CSS, and cutting-edge tech to deliver instant code solutions and summaries. This hands-on session will equip you with the knowledge to revolutionize how users interact with documentation, turning tedious searches into efficient, intelligent discovery.
Key Takeaways:
- Practical experience in creating an AI-driven documentation site.- Understanding the integration of AI into user experiences.- Hands-on skills with the latest web development technologies.- Strategies for deploying and maintaining intelligent documentation resources.
Table of contents:- Introduction to AI in Documentation- Setting Up the Environment- Building the Documentation Structure- Integrating ChatGPT for Interactive Docs
Learn Fastify One Plugin at a Time
Node Congress 2021Node Congress 2021
128 min
Learn Fastify One Plugin at a Time
Workshop
Matteo Collina
Matteo Collina
Fastify is an HTTP framework for Node.js that focuses on providing a good developer experience without compromising on performance metrics. What makes Fastify special are not its technical details, but its community which is wide open for contributions of any kind. Part of the secret sauce is Fastify plugin architecture that enabled developers to write more than a hundred plugins.This hands-on workshop is structured around a series of exercises that covers from basics "hello world", to how to structure a project, perform database access and authentication.

https://github.com/nearform/the-fastify-workshop