React Day Berlin 2024

React Query is a popular library for managing asynchronous state—most often state returned from data fetching. Its popularity has grown significantly over the past few years, with nearly 20% of all React applications now using it.
In this talk, maintainer Dominik will explore the other side—the less favorable aspects of React Query and situations where it may not be the best fit. No library is perfect; every choice involves trade-offs. By the end of this talk, you'll have a better understanding of React Query's limitations and why it remains a compelling choice despite them.

I’ve done https://fframes.studio/ — it is an open source video creation framework in Rust, but the previewer of the video generated content is implemented in React and allows to render 120fps video rendering using Rescript and Rust (compiled to wasm).

In this presentation l’ll show how make these languages best friends and make them superpower react for unbelievable performance.

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.

In this talk, we explore the application of React Server Components (RSC) to elevate the functionality and efficiency of forms. We will touch upon the core principles of RSC and their specific benefits for form development, such as improved load times and streamlined server-side processing. Additionally, we’ll learn the latest advancements in React 19 and the introduction of multiple new hooks.Attendees will gain insights into practical strategies for integrating RSC into forms, focusing on enhancing user experience and reducing front-end complexities.

Our quest to make our product faster and more performant forced us to reevaluate our state management solution. Unfortunately more than once: in the span of two years we migrated from Redux to Zustand to Jotai then back to Zustand (this time with some fancy tricks) and then finally to a custom solution. 
Should you do the same to figure out which library fits your use case best? Is a custom solution really necessary? Probably not, and to prevent you from making the same mistakes we did I want to tell you what we found really matters, as well as some important things we learned during this painful journey.

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.

Join me for an exploration into the core principles of building CLI tools that developers adore. Drawing from my extensive experience as a former fullstack developer and current lead product manager at Wix CLI, this talk will provide actionable insights into creating CLI tools that seamlessly integrate into developers' workflows. From intuitive design and robust functionality to prioritizing developer experience and fostering community engagement, I'll share essential strategies for crafting CLI tools that go beyond utility to become indispensable assets. Whether you're a seasoned developer or a product manager, this session will arm you with the knowledge needed to engineer CLI tools that resonate with users and stand the test of time.

Does your React app serve a global audience, but is only available in English? Let's change that. In this talk, I'll show you how i18n can become an automatic part of your CI/CD workflow, enabling your team, regardless of size, to deliver your React app in over 100 different languages without any extra effort.

Discover the untapped potential of Abstract Syntax Trees (ASTs) in this transformative session. Learn how we achieved a remarkable 16% reduction in our bundle size by inlining constant objects directly into the referencing code, eliminating the need for large files in the output. This method even outperforms Terser's tree shaking used by Webpack.

We will cover:

* Introduction to ASTs: What they are and why they’re invaluable.
* Overcoming AST Challenges: How to navigate the difficulties of working with ASTs.
* Best Practices: Proven techniques for effective AST utilization.
* Avoiding Pitfalls: A secret tip to prevent common mistakes.

ASTs are everywhere, and their applications are vast. This session will empower you with the knowledge and confidence to transform your code, revealing when and how to use ASTs for remarkable results.

Join me for an inspiring journey into the world of ASTs and unlock their potential to revolutionize your coding practices!

Achieving high-performance reactivity in React without compromising the developer experience has always been a key challenge. When building real-time applications designed to display hundreds of millions of rows without noticeable lag, fine-grained reactivity is essential. But when I started my journey at Pigment, neither Recoil, Jotai, nor Zustand were mature enough, and React Compiler was not yet a thing. Let's explore together how we managed to ingest, display, and update huge datasets seamlessly without sacrificing the developer or the user experience.

Maybe you don't know what React Flight is, but you probably heard something about React Server Components instead.
Do you want to understand how RSCs work? My advice is to start from the new communication protocol behind it, whose name is, guess what, React Flight.

In this talk I will show, step by step, how this protocol enables some of the most interesting RSC features (SSG, SSR, streaming content, server and client components, etc.), at the same time revealing some unexpected surprises: for example, did you know that you can use RSC without a server?

Everyone has heard of feature flags: boolean switches in your code that you can flip at runtime for different users, environments, etc. But they are just one part of a much broader best practice called “application configuration”. Big tech companies like Meta and Google have internal tools for structured, type-safe app configuration that help them accelerate development of products and backend services. This talk dives into what app configuration is and how it can empower your whole team to move faster, including your nontechnical colleagues.

I used to be a hip-hop artist with an album under Universal Music, songs on MTV, a Nike deal, and a track on PlayStation’s SingStar. But after a while, I realized that being an artist wasn’t my true calling. As an introvert, I decided to explore a new direction in life.
In this talk, I'll share how hip-hop has shaped my journey into the world of design and coding. Although I don’t see myself as a developer in the traditional sense, the DIY culture of hip-hop encouraged me to give coding a shot. I’ll talk about how this culture inspired my creativity and led me to work on a few React.js projects. Plus, I’ll give you a sneak peek into these projects, sharing a bit about the creative process and how I figured things out along the way.

Do you love standards but hatehatehate the DX of web components? Me too.

As a reformed skeptic of Web Components due to my DX concerns, I encountered an interesting challenge at SuperTokens: creating a UI library that supports all the frameworks and remains future-proof. After some research, I discovered that SolidJS compiles to Web Components, offering a familiar, React-like developer experience - exactly what was needed to convert me into a believer. After a couple of rounds of experimentation, I fell in love with web components.

This talk will share insights from our journey towards adopting Web Components for our next-gen authentication UI library at SuperTokens and why web components are a great idea that's here to stay.

When discussing frontend performance, there are usually two topics: Lighthouse scores, and rerenders. But when working on applications that deal with large amounts of data and pagination is not an option, entirely different categories of optimizations become necessary.

Through the case study of Axiom's trace viewer, we will examine the solutions that keep your application running (and running fast!) each time your data size grows by an order of magnitude. 

Twitter influencers would have you believe that if you just use the semantic html tag for elements instead of a div, your components will be accessible. but there's a lot more that goes into it!
Let's zoom in on one component from GitHub (one that you've probably used before!) and look at all the accessibility considerations involved and interesting challenges in implementing them.

Are our UI tests a chore, or do they help us move faster? Let’s examine what makes testing great and not so great. We’ll focus on test strategies that help us code with confidence and clarity, and where they can cost us time and energy. The secret to good testing lies in how it shapes our developer experience. Do our tests give us useful feedback in a timely manner? How quickly can we tell what is wrong when a test suite fails? Do they document our features and explain our past decisions? We’ll answer these questions with better tests that give us joy.