Video details

Nikhil Sharma - Road to a better UX with Suspense and Concurrent UI - React Live 2022


Nikhil Sharma - Road to a better UX with Suspense and Concurrent UI
Loaders are something that we display 100's of times in our application, even where we don't need them. Why not remove them already?
React’s Suspense and Concurrent mode, as introduced at JSConf Iceland have been a big topic of discussion amongst developers as it offers a different set of approaches for async rendering, data fetching, etc. This talk would showcase how a better and a responsive UX can be implemented by this new API set including topics like:-
1. React Suspense - The react docs states that according to their survey when comparing two apps with the same absolute startup time, our research shows that users will generally perceive the one with fewer intermediate loading states and fewer layout changes as having loaded faster. The practices would include:-
1.1 A demo showing how we can control the semantic order in which our components should appear, regardless of which is retrieved from the server first, using SuspenseList
1.2 Fetch in event handlers:- In order to remove the problem of waiting until the data is retrieved, the approach would be to start fetching code and data for a new view in the same event handler that triggers showing that view.
2. Concurrent mode - Now we are multi-threaded with javascript? We will find out in this talk. 2.1
Incremental Data loading for improved UI interactions - Using concurrent mode to render screens in memory while the user is busy interacting with other screens!
2.2 Wouldn't it be good if your users, on faster connections don't see those loading state stutters? Yes, its possible with useTransition hook provided by concurrent mode.
My talk would be based on a demo created by me which would highlight 2 same apps written in an old school way vs Suspense and Concurrent mode's way. I will be sharing the relevant link to the talk below.
#reactlive #jsworld #jsworldconference #frontendlove #frontenddeveloperlove #javascript #reactjs #angular #react #vuejs #vue #vue3 #typescript #graphql #jamstack #amsterdam #conference #svelte #sveltejs #next #nextjs #staticsite #css #html #nuxt