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.

Writing one component is easy. Conditionally rendering two different ones is still not hard. But what if you face an "n" number of permutations. "n" number of different UI elements and scattered business logic? Switch statements all over the place. Might not sound scary when we write the code. What about your future self? Cognitive load fires off the roof. Maintaining your code? Onboarding new devs? Good luck. Sounds all too familiar? Let's see a possible solution how to tame complexity. How to tackle a large number (possibly infinite) of branches in a frontend codebase without losing our sanity.

Learn how finite-state machines and reactive programming help us avoid callback hell at Grammarly.
We’ll discuss:

• Real-world challenges we faced when integrating new functionality into a complex existing architecture
• How FSMs transformed our approach to visualizing and scaling user flows
• Techniques for integrating state machines with RxJS and Focal signals to create elegant, maintainable solutions

Join us for actionable insights you can apply to your own React applications.

Aren't You Tired of Repeating Yourself?

Tired of repeating the same code over and over again in your React projects? In this talk, we'll discover the power of headless components, a design pattern that separates the logic from the presentation layer, allowing you to create reusable and flexible UI components. We'll explore how headless components can simplify your development process, saving you both time and effort. Whether you're a beginner or an experienced developer, join us to discover how headless components can help you streamline your React development and create high-quality, customizable UIs.