#react 18

Subscribe
Learn everything about the newest React 18 APIs and best practices using the most latest React library version.
React Summit 2023React Summit 2023
26 min
Server Components: The Epic Tale of Rendering UX
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 place
2. What are server components and what benefits did they bring like 0 javascript bundle size
3. Demo of a simple app using client-side rendering, SSR, and server components and analyzing the performance gains and understanding when to use what
4. My take on how rendering UI will change with this approach
React Summit 2023React Summit 2023
24 min
React Concurrency, Explained
React 18! Concurrent features! You might’ve already tried the new APIs like useTransition, or you might’ve just heard of them. But do you know how React 18 achieves the performance wins it brings with itself? In this talk, let’s peek under the hood of React 18’s performance features: - How React 18 lowers the time your page stays frozen (aka TBT) - What exactly happens in the main thread when you run useTransition() - What’s the catch with the improvements (there’s no free cake!), and why Vue.js and Preact straight refused to ship anything similar
React Advanced Conference 2021React Advanced Conference 2021
30 min
Cracking the Concurrent Mode
With concurrent mode coming in React 18, let's talk about the complexities behind providing declarative APIs for concurrent rendering. While implementing concurrent mode APIs from scratch for Brahmos.js, I came across lot of use cases and variability which made it one of the most interesting problem to solve, and appreciate more the React's effort on advocating Concurrent UI. In this talk we will see what concurrent mode means for a web app, what are the internal complexities and how I solved it for Brahmos.js.


React Advanced Conference 2021React Advanced Conference 2021
36 min
Living on the Edge
React 18 introduces new APIs for rendering applications asynchronously on the server, enabling a simpler model for architecting and shipping user interfaces. When deployed on edge networking platforms like Cloudflare Workers, we can get dramatic performance and user experience improvements in our applications. In this talk, Sunil will demo and walk through this new model of writing React applications, with some insight into the implications for data fetching, styling, and overall direction of the React ecosystem.


React Day Berlin 2022React Day Berlin 2022
30 min
Staying Safe In a Concurrent World
With React 18 the long awaited concurrent features are now available to the public. While they technically do not introduce new restrictions about how we build our components, there are many patterns that previously worked but might now introduce subtle bugs in your apps. Let's re-learn the rules of React so that we can stay safe in this new concurrent world.
React Advanced Conference 2022React Advanced Conference 2022
17 min
Zero Bundle Size Server Components
Server components is an exciting new feature introduced in React 18. It lets us leverage the fast performance of the server by offloading work behind a component to the server. Why would we want to do that? because server has direct access to data source .so fetching data, making aPI calls would be really fast on the server. The most amazing thing about RSC is that they add 0 kb to the client bundle. So not only RSC reduces the bundle-size but will also improve page load times, eventually providing better user experience. In this talk I will be talking about what react server components are, why do we need them . RSC is often confused with SSR but we will see how they are fundamentally different. We will create a small react application using server components and see the performance benefits. We will also see the challenges we might face when we use RSC in our normal react application. Finally we deep dive into React’s brain and see how things are happening under the hood.
React Advanced Conference 2022React Advanced Conference 2022
23 min
Staying Safe in a Concurrent World
With React 18 the long awaited concurrent features are now available to the public. While they technically do not introduce new restrictions about how we build our components, there are many patterns that previously worked but might now introduce subtle bugs in your apps. Let's re-learn the rules of React so that we can stay safe in this new concurrent world.
React Summit 2022React Summit 2022
10 min
The Subtle Art of "Subtle Loading"!
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”!
React Summit 2022React Summit 2022
23 min
Let’s Talk about Re-renders
React is a fantastic tool to implement complicated applications fast, we all know it. But are they going to be fast when implemented fast? Let’s talk about re-renders and their danger in react: how easy it is to make a mistake, why some small mistakes can have a huge downstream effect, and how to avoid and prevent them.
This is a deep-dive type of talk, that focuses on why React components re-render, what kind of performance impact it can have, and what to do about it