React Advanced Conference 2024

If you’re a seasoned React Native developer, you may have been burned by the fact that certain React behaviours just don’t work as you’d expect. We’ve all tried to use useLayoutEffect on our RN projects, only to find that it doesn’t quite behave how the React docs describe it.
All of that will change with the new event loop coming to React Native as part of the effort to bring React Native closer to Web APIs. 
Strap in for a wild ride where we dig into the depths of how the event loop currently works, how it will change, and what this means practically for us as React and React Native developers.

React Query is a popular library for maintaining asynchronous state - most often state returned from data fetching. It has grown so much in popularity over the last couple of years that it is now used in almost 20% of all React applications. To some extent, this is attributed to it's ease of use and great developer experience.
In this talk, React Query maintainer Dominik will walk us through some of the API design choices that were made in React Query to get to that DX. You'll hear stories about things that went well, but also about tradeoffs and mistakes that were made, and what lessons we can all learn from those.

The most talked-about news in the React community this year is probably the React Compiler. Everyone is looking forward to being saved from the re-render plague and never having to write useCallback/useMemo again.
But are we truly there yet? Can the React Compiler actually achieve those things? Do we need to do anything other than turning it on and enjoying a re-render-free life? I ran it on a few real-world apps to find the answer. Want to see the results?
In this talk, we’ll take a look at what the React Compiler is, what problems it solves, and how it performs on simple code examples and real-world applications.

React portals + RxJs = micro frontends on steroids.At bettermarks, we are migrating an AngularJS app to React using micro frontends. Picture a dashboard with widgets from different frontends depending on permissions and settings without coupling.We implemented a reliable solution for our micro frontends - and yes, we can embed React components within AngularJs!I'll showcase our solution and demonstrate how this can help you build more robust applications by trying to break our.

More often than not, performance starts with how data is loaded in your app. Which data has dependencies? Which data is critical to the page? Which data is variable? Static? Personalized? Available offline? In this talk, we'll use Remix to explore how different data loading strategies can improve your user’s experience.

Discover how React's often overlooked concurrent features like startTransition, useDeferredValue, and Suspense can transform your application's performance and responsiveness. Learn practical techniques to prioritise critical updates, gracefully handle loading states, and create fluid user experiences even with complex data interactions.

One skill that will always be relevant is profiling. No matter the framework, no matter the version, at some point you will have to dive into why your application is not performing at its best. In this talk, we will show how you can use React Dev Tools alongside the standard Dev Tools to identify and resolve performance and memory issues. There are some hidden gems within Dev Tools profiling panel that goes beyond just measuring how much time is spent executing a function and we will discover them together including new features released this year.

Next.js deep integration between the client and the server makes developing fast JavaScript applications a breeze. And it's also the worst nightmare of your security team. Let's discover a few security patterns for server-rendering frameworks like Next.js.

When Remix was first released in 2020, its goal was to provide framework-level features on top of React Router, simplifying server-side rendering, data fetching, state management and build tooling. Now, with the release of React Router v7, the entirety of Remix is getting merged back upstream into React Router. This is a huge step up for the React community since React Router powers roughly half of all React downloads. In this talk we'll take a look into how this happened and what this means for the future of React frameworks.

In this talk, we'll examine how GraphQL fits into the React Server Component paradigm and how to use Apollo Client, a client-side data store, in a world of streaming SSR. Starting with a demo built with only Server Components with GraphQL, and juxtaposing it with an app using only Client Components, we'll show why a framework with a client-side data store that can also interact with RSC is the best of both worlds alongside good practices when combining it with GraphQL.

The talk is focused on the trend in the industry towards build time operations.And aims to provide the starting point for the viewers to understand this better. Now since every major library is adopting the build time strategy to add performance gains. It's high time that everyone should understand how these things work and how to make a build time solution.

If you’ve never heard of Maestro, I will show you why I think it's the best e2e testing tool.

And if you have, I will share some tips for an effective integration into your workflow.

This is an educational talk on Maestro where I’ll cover when, what & how to test. I often see people re-building for each run. So I’ll also dig into some Expo specificities (such as eas update & build:list) that will enable you to optimize time and cost and achieve a state-of-the-art CI/CD with Maestro.

Front-end developers often face the challenge of building UIs that need frequent updates to keep up with changing business requirements and user preferences. This can lead to slow release cycles and frustration for both developers and users. Server-Driven UI (SDUI) offers a solution by shifting UI logic to the backend, enabling rapid updates without requiring app store approvals or complex deployments. This talk will explore how SDUI, combined with React, empowers teams to build flexible, maintainable, and quickly adaptable applications that deliver exceptional user experiences.

We'll talk about how React itself is adding new features consistently and pushing the boundaries of rendering libraries. Also, about the ecosystem and how that is constantly expanding. 

Introducing design system into mature codebase. Let me walk you through our challenges, very useful tools to understand your current situation, tools to measure the impact of design system work, tools to make it happen.

In this talk, we will explore how we can use AI to enhance user experience by having large language models return interactive React Components that we define to our users. This way, instead of instructing users on what to do with text, our applications can present interactive user interface elements directly in response to a user query. We discuss this briefly in this PodRocket episode where the Vercel CTO says it could be game changing. In this talk, we teach developers how to implement such functionality in their applications.

How many times have you done this: Made an API, used the data with React, and then started over, again and again? What if we could make a full stack React application that can create user interfaces on its own, without needing to write any backend code and directly chat with your data? In this talk, we'll learn how to make an app that can change the way data looks using simple text commands and smart AI changes. Let's talk with your components.

The data returned from one endpoint to a frontend app should reflect the state of the world at a (recent!) point in time in the past. But it may not! And the data returned from multiple endpoints often reflects the state of the world at multiple points. What can be done, and what should be done? What's the worse that could happen, and what's the worse that reasonably, probably going to happen?

Let's talk through the tradeoffs, look at how some some teams approach it, and hear how much they actually care.

The talk will start with a quick introduction to React Server Components and then move on to show how they're visualized in one of the developer tools we've built for RedwoodJS. This will give everyone a better understanding of where the client/server boundaries are and how ""use client"" and component imports work together to decide what code gets executed by the RSC server and what code gets executed in the user's browser. This understanding is generally applicable to any RSC enabled framework (which mostly means NextJS right now).
Now, with the audience equipped with a better understanding of RSCs I'll dive into the RSC Payload (aka Flight) format explaining what it is and how it works. For this part of the talk I will use a tool we've built to record and visualize the RSC network traffic to aid me in explaining the RSC protocol. I will also show how it helps developers identify bottlenecks by showing payload sizes and request durations.
After attending my talk, the audience will have a much deeper understanding of how RSCs work, all the way down to the RSC protocol level. They will also be excited and eager to explore our state-of-the-art RSC app developer tooling.

When it comes to testing library code, the (usually amazing!) "Testing Library" approach quickly hits its limitations: We often need to test hot code paths to ensure additional guarantees, such as a specific order of DOM changes or a particular number of renders.As soon as we start adding Suspense to the picture, it even gets almost philosophical:- How do we count a render that immediately suspended, and how do we distinguish it from a "committed" render?- How do we know which parts of the Component tree rerendered?
In the Apollo Client code base, we're using the React Profiler to create a stream of render events, enabling us to switch to a new stream-based testing method.After testing this approach internally for a year, we have released it in a library that we want to present to the world.I'll also briefly look into other "testing-related" problems far outside the norm that we've come across and share our solutions:How to test libraries that bundle different code for React Server Components, streaming SSR runs, and the Browser: Testing your growingly complex `exports` fields and ensuring all those environments export the package shape you expect.We'll even briefly look into rendering React components in different environments to test them in isolation - be it in Server Components, Streaming SSR, or simulating stream hydration in the Browser.

You've just finished building a brand-new blazing fast JS library and can't wait to publish it to NPM. But hold on a minute - what about the docs? Sure, anyone can slap together a README with some example code snippets, but have you actually thought about how to actually design the docs themselves?Join Redux maintainer Mark Erikson as we look at ways to effectively structure and write documentation to help your users learn and understand how to use your tools, based on years of experience building the Redux docs.  We'll talk about patterns for organizing categories of documentation, tips for making the docs easier to read and understand, useful tools for working with docs content, and more!

Next.js is the default choice for most teams, although there are many other solutions on the market. One of such solutions is Astro, which in certain areas, due to its eccentric approach, seems to outclass the Vercel king. During this lecture, I will present the key features of Astro, as well as the differences between it and the aforementioned Next.js. You will learn what interactive islands are, why MPA (multi-page application) is still a very good choice for content-driven websites, and much more. Who knows - maybe you will use Astro in your next project?

Expo, the official framework of choice for building React Native apps, has both a "managed" workflow (where you purely write JS, just using what the SDK offers) and a "bare" workflow (where you can write custom native code). To opt into the bare workflow, one has to "prebuild" one's apps to expose all the native boilerplate.

Expo Prebuild is widely used, but it can be a little unclear exactly what it does and how it does it all (such as how it can bring your native project back up to date after you bump the Expo SDK version). In particular, its capability of generating native projects from custom templates is underused. Following this talk, though, we hope to change all that!

I've been developing a React framework called Waku, which focuses on React Server Components (RSC). Waku supports Server Actions, allowing us to call functions on the server from the client. In this talk, I will explain how Server Actions are implemented in the framework. To enable Server Actions, the framework transforms (or compiles) user code. While users don't need to know the detailed process of this transformation, understanding it can provide a better mental model for working with Server Actions.

The JavaScript ecosystem has evolved significantly, with Bun.js marking a notable milestone. Built from the ground up in Zig, Bun.js is an all-in-one JavaScript runtime featuring an integrated package manager, bundler, test runner, and Nodejs-compatible environment designed for the growing demands of edge computing and server-side applications. My presentation will explore Bun.js's foundational principles, highlighting its performance benchmarks against traditional runtimes like Node.js, seamless TypeScript support, zero-configuration framework, and innovative features such as built-in hot reloading and efficient file operations.

For developers and designers, components are unique, flexible units to compose complete layouts. For content creators, they can trap reusable data into single-use decorations.

Knockout had it first, Vue was always hiding it, Solid made it popular, and now Svelte and Angular are also integrating it: reactivity based on signals. If all these other frameworks lean on this special primitive, should React follow suit as well?

In this talk, we will examine the less-discussed downsides of signals and explain why I believe React should stick to its current approach of plain values and functions.

My presentation on React Native's Re-Architecture highlight pivotal changes in mobile app development. Focused on modularity, scalability, and improved bridge communication, it enhances app performance. With concurrent rendering and platform agnosticism, React Native remains the go-to for efficient cross-platform development. 

As the momentum of web development swings back towards the server, streaming is becoming increasingly popular. Specifically, out-of-order streaming with features like React Suspense — one of the magical powers behind Server Components.

Let's build our very own (simplified) version to explore how it works, what problems we are trying to solve, and what this future of web development looks like.

Observability is the ability to measure the current state of a system. Backend engineers are becoming more familiar with the 3 pillars of observability, and technologies such as OpenTelemetry that can be used to instrument applications and diagnose issues. Yet in the frontend world, we're behind the curve.
Join me as I dive into the tools and techniques we can use to instrument, monitor and diagnose issues in our production React applications. I'll cover RUM agents and React framework extensions, and the metrics and traces they provide, how to combine them with backend tracing for a holistic picture, and how Synthetic Monitoring and alerting in Observability platforms can help us be alerted to issues impacting users in the UIs we build and maintain.

This is the full story behind "Make Real", tldraw's viral AI experiment that lets you turn your low fidelity drawing into a functional website. It's half startup rollercoaster ride and half moral tale about betting on React — as Make Real was only possible because of the ability to put any React component onto tldraw's canvas.

Here's the full behind-the-scenes perspective, and everything we learned along the way.

CSS Is more powerful than we usually give it credit for. Let's see together how we can make use of CSS to build together fully functioning filtering capabilities into an emoji-picker component, improving performance while at it.
We will use some old and new techniques, and combine them in creative ways to turn a slow, laggy experience into a responsive and modern searching capability.
We'll learn about the advancements in CSS, and discover the untapped potential of CSS for building dynamic UIs.

Ever wondered how to truly connect and collaborate with designers? Want to learn the best strategies for clear and effective communication? Curious about how to get designers to deliver exactly what you need? Discover how to refine your communication skills, integrate designers seamlessly into your workflows, and create a harmonious, productive environment for future projects. This talk aims to be your ultimate guide to mastering the art of working with designers – don’t miss it!

In this talk, we'll dive into Wix's journey towards achieving unmatched web performance through advanced code-splitting techniques in React, tackling the significant challenges posed by large JavaScript bundles and excessive main thread usage. 

As Wix's application expanded, facing increased complexity and demand, traditional performance optimization methods fell short. This presentation will trace the evolution from basic dynamic imports to sophisticated strategies like React component splitting, server-side logic separation, and the adoption of modern techniques including SSR, Suspense, and React server components. Emphasizing the necessity for scalable solutions in large-scale applications, we will also discuss the implementation of the Inversion of Control (IOC) pattern for efficient feature loading. 
Importantly, for each solution, I will provide code examples of both the issue and the solution, suitable for both beginners and advanced React developers. 

This story not only showcases our significant performance improvement but also highlights the importance of evolving optimization strategies to align with the scale of the application, offering insights into transitioning from simple fixes to advanced, robust solutions for enhancing web application performance in React.

Learn how to build fast, adaptive web applications that dynamically respond to user conditions and context in this informative talk. Discover the principles and techniques behind adaptive design, including responsive layouts and dynamic interactions, optimized for different browsers, device strengths, internet speeds, screen sizes, and user preferences. Explore the role of data-driven decision-making and user analytics in tailoring content and features quickly and efficiently based on these variables. Gain practical insights into implementing fast, adaptive web apps using various technologies and frameworks. Understand the significance of user testing and feedback loops in refining the application for a seamless and speedy user experience. Walk away with actionable strategies to create personalized, high-performance web experiences that drive engagement and success.

Discover practical strategies for expanding your influence as a staff engineer. This talk covers building technical credibility, effective communication, mentorship, and leading technical initiatives, helping you make a lasting impact within and beyond your engineering team.

Tailwind blew in sweeping developers into two opposing camps. You have already picked your side, you’re either team pro Tailwind or you run far away. But what if I told you there is a third option? 

This CSS framework should come into play only when the perfect type of project calls for gentle breezes. In this talk, with illustrative examples, we'll elaborate on how to improve the experience of working with Tailwind CSS using simple practices. I’ll challenge your preconceptions and answer the important question, for which cases Tailwind is the best solution or when it's better to choose an alternate CSS tool.

The top-selling Android phone in 2023 is 8x less powerful than high-end devices like the Pixel 8. This gap highlights a common blind spot among Android devs: we often use powerful devices and don't necessarily spot performance issues in our apps.

However, traditional performance testing is often seen as a cumbersome and time-consuming task, leading many to skip it in favor of pushing out new features.
But what if there was a way to simplify this process, making performance testing as straightforward as running a single command?

This talk presents how we can make this dream a reality: by using AI to automatically explore our app and combine it with the proper performance measuring tools, we can essentially get automated quality audits of our apps!

Building a business is a slugfest to see who gets more customers first. You have to adopt that mindset when writing code. As an old boss told me once: Clean code won't matter if we're dead. You have to shift your mindset from best practices to getting shit done. But you can't go too wild or the tech debt will kill ya. 

Most developers spend a lot of time optimizing for load time performance metrics, but most of the user's experience is after load. Lets understand what INP mean to your React application, how to utilize the new tolling around interactions such as the new Long Frame API alongside the upcoming INP metric to optimize our runtime performance.