Road to a Better UX with Suspense and Concurrent UI

React Summit Remote Edition

React Summit Remote Edition 2021

Nikhil Sharma

setState, We Need to Talk!

React Advanced

React Advanced 2021

The Subtle Art of "Subtle Loading"!

React Summit

React Summit 2022

Server Components: The Epic Tale of Rendering UX

React Summit 2023

Wait, React Is Multi-Threaded?

React Day Berlin

React Day Berlin 2022

Animating React With Finesse!

React Summit 2024

Animations are the heartbeat of captivating web experiences but wield them carelessly, and the enchantment fades into frustration. Join Nikhil on an exhilarating journey as he reveals the secrets to crafting mesmerizing, high-performance animations in your React apps.In this dynamic talk, Nikhil delves deep into the world of animation, dissecting the common bottlenecks that threaten your app's responsiveness. Learn how to identify, debug, and eliminate these performance roadblocks, ensuring your animations are as snappy as they are spellbinding.

Server components, introduced in React v18 end these shortcomings, enabling rendering React components fully on the server, into an intermediate abstraction format without needing to add to the JavaScript bundle. This talk aims to cover the following points:1. A fun story of how we needed CSR and how SSR started to take its place2. What are server components and what benefits did they bring like 0 javascript bundle size3. Demo of a simple app using client-side rendering, SSR, and server components and analyzing the performance gains and understanding when to use what4. My take on how rendering UI will change with this approach

We already know, ""if some task takes time, promisify it!"". But some tasks can be computation heavy and can take time to complete, so making them async is of no use since those have to be anyway get picked. Solution? Simple, multithreading! Yeah I know that React and in turn javascript is single-threaded but what if I told you that our life was a lie ever since? Enter web workers! Key takeaways of the talk: 1. An example of a simple product search showing why async js or concurrent mode cannot work. 2. Demystifying web workers. 3. How they make this magic happen under the hood? 4. The Question of life - Aren't they same as concurrent mode? 5. Comparing the same Product list app using web workers, diving deep into the performance. 6. How one can easily misuse web workers and how to avoid it.

Loading…, Loading something else…, Finally loading one more thing… This doesn’t sound good right? Yeah I too feel the same 😔Loaders are indeed a great way to provide feedbacks to users that “something is happening”. But they can be easily misused, and that day comes when we see tonnes of loaders popping in our UI, defeating its purpose. Enter Suspense and SuspenseList in React!What if you could think “what parts to show a loader so that I see very less loaders”? What if you could also control the order in which they should appear? Let’s dive a bit deep into this problem and think of “right loader orchestration” experience instead of “just loaders everywhere”!

One of the biggest pain points when developing an app is the tricky business of managing state, race conditions, etc. Finite state machines can help eliminate such bugs entirely while providing a welcome, structured way to build components. Looks cool? Let’s build one, it’s even cooler! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Put up your thinking caps with Suspense and Concurrent mode! In this talk, I would discuss how to improve the existing user experience with the magic of React’s Suspense and Concurrent mode for non-blocked rendering. The talk would highlight the best practices and guidelines for the same. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>