Upgraded to React 18 but don’t know how to utilize its capabilities to the best to boost the performance of your React apps? Wanna master the techniques to optimize the performance of your apps using the latest React v18? Join Nikhil in this talk where he dives deep into some of the key techniques/best practices to supercharge your react apps with concepts like concurrent rendering, server components, enhanced server-side rendering, server components, and data fetching with the magic of Suspense and so much more, in a super simple and fun way!

This session is tailored to dive deep into some of the prime features and best practices of React 18 to supercharge the performance of the React apps

Key takeaways and talk structure

1. We kick things off with a jaw-dropping demonstration of a Twitter dashboard app created with React 17, setting the stage for what you already know.

2. A quick graphical representation of React’s rendering process with React 17 and how it bottlenecks with long tasks. But fear not, as we unveil the revolutionary solution - Concurrent Mode. Discover how React 18 can "interrupt" its rendering process, prioritizing essential tasks. It's like watching a magic show; we'll reveal how concurrent rendering conjures a background skeleton of your React components, making them "ready-to-render" faster than ever before.

3. The story doesn't end there. We'll delve into the issue of the infamous "waterfall model" in React 17, only to introduce the knight in shining armor - Suspense. Bid farewell to a multitude of loading states, as we demonstrate how Suspense streamlines your apps.

4. But there's more! We'll unveil how you can leverage Suspense to eliminate SSR bottlenecks, rendering parts of server code that once caused delays in React 17 - it's like watching a caterpillar transform into a butterfly.

5. Hold your breath, because we're taking it a step further. Have you ever dreamt of shipping "0 JavaScript" with Server Components? We'll make that dream a reality.

6. Ever wondered about giving non-urgent updates the right treatment? Get ready for the revelation of the useTransition hook. We'll also clear the air on the common question: "How is this different from debouncing or setTimeout?"

7. But the climax of our journey will be a dazzling final demo of the Twitter dashboard app, now equipped with all these superpowers, comparing the performance between the two apps.