This talk will explore how race conditions can lead to a broken experience for a seemingly simple UI interaction. I will show how I use a technique I call "chaos mode" to help me spot these race conditions, and I will cover some effective approaches to prevent those race conditions.

In real life: the feature is urgent, the code is complex, and we at least need to keep things consistent, right? So, how do you stick to "good practices" -- in practice?

Well, sorting out your code is a bit like sorting out your life. If you shift your perspective, solutions tend to reveal themselves. I will show 20 real examples of React hooks, component compositions, types and interfaces "before and after" a Zen change. You will learn the 3 questions to ask when reading code that reveal how to reduce complexity, ease confusion, and relieve suffering.

There have been many react component patterns used over the years to facilitate the composition of frontend software.

However, React has evolved over the years especially with the introduction of hooks and context. Newer ways to do things clash with the so-called "older ones". In my talk, I want to take a relook the patterns from the perspective of a developer's needs for implementation, be it extracting logic, combining props, handling hierarchy, or inverting control of state.

Once the need is established, it is helpful to compare the new and the old patterns, if they exist, for the same goal and understand the pros and cons of each.