Road to a better UX with Suspense and Concurrent UI

By Nikhil Sharma

Elevator Pitch

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.

Description

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 approach for async rendering, data fetching, etc. This talk would showcase how a better a responsive UX can be implemented by this new API set including topics like:-

  1. Best practices for 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 Parallel Data and View Trees:- what data a component needs with how to render that data. Hence data should be fetched before rendering the component. The the only way to achieve that is by extracting the data dependencies into parallel data and view trees. 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. 1.3 React.lazy - The ‘render-as-you-fetch’ for code 1.4 Incremental Data loading for improved UI interactions - Loading some parts of the UI while the data is still being retrieved 1.5 Cherry on the cake with a flash intro of what concurrent mode is and steps to implement Concurrent mode in your app

Notes

Technical requirements : - Just a curious mindset :)

I have been a speaker at different meetups like GDG Delhi Devfest `19, Facebook Developer Circles and React Delhi NCR. I am reaslly enthusiastic and determined to give a talk at this platform too. The react community has been instrumental in bringing and interacting with new faces along with the experienced ones. Therefore I thank the community for giving me a chance so that I could prove myself at such platforms and giving me so much to learn. Therefore I hope for the same here that apart from already familiar faces, the experienced community, as well as the Reactjs Bangalore crew, would provide me a chance to speak at the conference and help me get a platform as an initial headstart so that I start with my bit to contribute to the community.

The topics and the sub-topics that I have chosen might take more time than the required one. Hence I would love to discuss the topic sequencing and taking only the important ones after discussing the cfp team. Looking forward to a positive response. I would give my best, not to let you down.