A New Kind of Abstraction

Mike Hartington

The Actor Model: a new mental model for React

Farzad YousefZadeh

Proven Pinia Patterns

Adam Jahr

Becoming a Form Wizard: Intuitive Multi-Step Workflows

Nick Hehr

Full-stack & typesafe React (+Native) apps with tRPC.io

Alexander Johansson

Best Practices and Patterns for Managing API Requests and States

Advanced Patterns for API Management in Large-Scale React Applications

Thomas Findlay

Thinking in React Query

Dominik Dorfmeister

Authorization Patterns in GraphQL

Sam Scott

Routing in React 18 and Beyond

Delba de Oliveira

Patterns for Performance

Stephen Cooper

React Slots: a New Way of Composition

Neo Nie

Killing Bugs With Kindness

Darshita Chaturvedi

Separating Separation of Concerns

Jacob Whitford-Bender

Component Design Patterns

Michael Thiessen

Infer multiple things at once with reverse mapped types 

Mateusz Burzyński

7 TypeScript Patterns You Should Be Using

Morten Barklund

Understanding Rendering Patterns

Atila Fassina

Off with Their Heads: Rise of the Headless Components

Omry Nachman

How to NOT use useEffect?

Mohamad Shiralizadeh

Game Development Patterns and Architectures in JavaScript

Olayinka Atobiloye

React Summit

React Summit 2022

Concurrent React and Server Components are changing the way we think about routing, rendering, and fetching in web applications. Next.js recently shared part of its vision to help developers adopt these new React features and take advantage of the benefits they unlock.In this talk, we’ll explore the past, present and future of routing in front-end applications and discuss how new features in React and Next.js can help us architect more performant and feature-rich applications.

React Day Berlin

React Day Berlin 2023

React has exploded in popularity thanks to the performance and unrivaled developer experience the virtual DOM and reconciliation could offer. But as our apps grew, we started pushing the boundaries of managing client state in a performant way. Let's see how to achieve fine-grained reactivity and what resumability brings to the table.

React Advanced

React Advanced Conference 2023

Are you using React in your project? If so, you must used useEffect! Actually, it’s essential for many use cases, but there are instances where it might not be the best solution, and avoiding it can improve your application's performance. In this talk, we will learn from experience which is the missing piece of the puzzle to master useEffect. Taking a look at the incorrect cases and trying to improve their performance helps us to have a deeper understanding of it.

When working with React it is important that we use the right tool for the right job. If not we will be missing out on the best performance and developer experience. While optimising AG Grid React Table we discovered a number of patterns that made significant improvements to the tables performance.

JS GameDev Summit

JS GameDev Summit 2023

In the realm of game development, the right architecture and design patterns can make all the difference. This session delves into the world of game development patterns and architectures in JavaScript, offering a comprehensive exploration of the techniques and strategies used to create engaging and well-structured games.

TS Congress

TypeScript Congress 2023

Learn about inferring with reverse mapped types to create great inferences for arguments that aggregate different items of the same shape. The technique can help you to introduce type-level relationships within objects and tuples. The talk will start with the introduction to the technique and will go through a couple of real-world-like examples of how this can be used to improve library types.

React Summit 2023

In this talk, we will be going over a number of common useful and best-practice-proven TypeScript patterns to use in React 18. This includes how to correctly type component properties, children and return types, using React's built-in types, typing contexts, and the usual enum rant (but constructively).

In this talk, I'll explain React Query from a different perspective. After having maintained React Query for over two years and having answered many questions (often the same ones multiple times), I feel like there might be a fundamental understanding missing about the lib. I'll start with a quick introduction about my journey into open source and how I got to know React Query, followed by showing which mindset change is beneficial when working with React Query - how to "think in React Query". I'll have 3 major takeaways: 1) React Query is not a data fetching library It's an async state manager, we'll quickly talk about what makes a state manager, why React Query is one and what "async state" means. 2) staleTime is your best friend I've seen a bit of confusion about how to use React Query as a state manager, so I'll explain why setting staleTime is mostly all you need 3) parameters are dependencies This is important to understand to show the boundaries between client state and server state, and is essential when doing state management with React Query I will then end with a note on "separation of concerns" and about the tradeoffs of just calling `useQuery` wherever you need it in your component tree.

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. We'll examine popular headless component libraries and provide tips for integrating them into your projects. 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.

Vue.js Live Conference

Vue.js London 2023

With Vue's new-and-improved state management library, Pinia, we gain a much more modular tool. While being more flexible, leaner, and lacking the Mutations of Vuex, Pinia presents us with more opportunities to be creative, for better or worse, with our app architecture and how state management is conducted and organized within it.This talk explores some @posva-approved best practices and architectural design patterns to consider when using Pinia in production.

How do you write a good component? In this talk we’ll explore several different patterns for writing better components. We’ll look at techniques for simplifying our components, making them easier to understand, and getting more out of the components we’ve already got.

GraphQL Galaxy

GraphQL Galaxy 2022

As it says in the GraphQL documentation: "Delegate authorization logic to the business logic layer". Is that really everything you need to know? This advice is coming from a good place, but it relies on you knowing how you would go about doing authorization in the first place — and this isn't a widely solved problem! On top of that, many of the approaches used in traditional applications don't quite carry over. In this talk, you'll get a crash course in authorization and how to implement it for GraphQL APIs."

React Advanced Conference 2022

We all know that separating concerns is different from separating technologies. That's what react's all about. But what is a concern? What is it to separate them? Why should I be concerned about concerns, or separation?

In this talk, we will take a novel and original look into some of the unexpected behaviors in a React codebase and the anti-patterns that cause them. We discovered them while building a new full-stack web development framework on top of React.

In this talk we will learn what is Slots and what does it mean to the React ecosystem, what's the current state and the future.

Forms are a core part of many applications and complex actions are often broken up into multiple forms as steps in this workflow. Using React’s Context API and a conventional state machine, we can build a reusable system for building these wizards and make the web a bit more magical.

React Advanced Conference 2021

In this talk, you will discover how to manage async operations and request cancellation implementing a maintainable and scalable API layer and enhancing it with de-coupled cancellation logic. You will also learn how to handle different API states in a clean and flexible manner. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Why are we devs so obsessed with decoupling things that are coupled nature? tRPC is a library that replaces the need for GraphQL or REST for internal APIs. When using it, you simply write backend functions whose input and output shapes are instantly inferred in your frontend without any code generation; making writing API schemas a thing of the past. It's lightweight, not tied to React, HTTP-cacheable, and can be incrementally adopted. In this talk, I'll give a glimpse of the DX you can get from tRPC and how (and why) to get started.

Developers often look at abstractions as being "the closer to the metal, the better," meaning that as abstractions become further removed from the lowest possible level, the more you give up in terms of performance and features. But abstractions work as a spectrum also. We'll look at how we can adjust our view of abstractions and what kind of examples we can use to better understand that abstractions have less to do with programming and more to do with where we deploy. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

React Finland

React Finland 2021

System-level state management in modern React applications is challenging. Usually, as the applications grow, the complexity of interaction between different parts of the application compounds. The more you need those isolated parts to talk, the higher the level of complexity. Usually, the common pitfalls of these communications are underestimated especially with the recent trend of State management that tends to keep the application state outside of React and distributed. In this talk, We'll see how the Actor Model architecture can come to the rescue and what makes it stand out compared to the other approaches. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

With the rise of frameworks, such as React, Vue or Angular, the way websites are built changed over the years. Modern applications can be very dynamic and perform multiple API requests to populate a website with fresh content or submit new data to a server. However, this paradigm shift introduced new problems developers need to deal with. When an API request is pending, succeeds, or fails, a user should be presented with meaningful feedback. Other problems can comprise API data caching or syncing the client state with the server. All of these problems require solutions that need to be coded, but these can quickly get out of hand and result in a codebase that is hard to extend and maintain. In this workshop, we will cover how to handle API requests, API states and request cancellation by implementing an API Layer and combining it with React-Query. Prerequisites: To make the most out of this workshop, you should be familiar with React and Hooks, such as useState, useEffect, etc. If you would like to code along, make sure you have Git, a code editor, Node, and npm installed on your machine.

#patterns