#react

Server components, introduced in React v18 end these shortcomings, enabling rendering React components fully on the server, into an intermediate abstraction format without needing to add to the JavaScript bundle. 
This talk aims to cover the following points:
1. A fun story of how we needed CSR and how SSR started to take its place
2. What are server components and what benefits did they bring like 0 javascript bundle size
3. Demo of a simple app using client-side rendering, SSR, and server components and analyzing the performance gains and understanding when to use what
4. My take on how rendering UI will change with this approach

React 18! Concurrent features! You might’ve already tried the new APIs like useTransition, or you might’ve just heard of them. But do you know how React 18 achieves the performance wins it brings with itself? In this talk, let’s peek under the hood of React 18’s performance features: - How React 18 lowers the time your page stays frozen (aka TBT) - What exactly happens in the main thread when you run useTransition() - What’s the catch with the improvements (there’s no free cake!), and why Vue.js and Preact straight refused to ship anything similar

In this talk, we'll look at some of the modern options for building a full-stack React and GraphQL app with strong conventions and how this can be of enormous benefit to you and your team. We'll focus specifically on RedwoodJS, a full stack React framework that is often called 'Ruby on Rails for React'.

Let’s face it: technical debt is inevitable and rewriting your code every 6 months is not an option. Refactoring is a complex topic that doesn't have a one-size-fits-all solution. Frontend applications are particularly sensitive because of frequent requirements and user flows changes. New abstractions, updated patterns and cleaning up those old functions - it all sounds great on paper, but it often fails in practice: todos accumulate, tickets end up rotting in the backlog and legacy code crops up in every corner of your codebase. So a process of continuous refactoring is the only weapon you have against tech debt. In the past three years, I’ve been exploring different strategies and processes for refactoring code. In this talk I will describe the key components of a framework for tackling refactoring and I will share some of the learnings accumulated along the way. Hopefully, this will help you in your quest of improving the code quality of your codebases.

Conditional rendering issues in JSX, forwardRef, serveral ways to create refs, render props (yeah they still exist), higher-order components (do they still exist?), act, non-extendable classes, SuspenseList (well, maybe in 10 years), React.FC and of course our good old friend useEffect. All these weird things are part of our favourite library (not a framework™) and yet we still use and love it. Why actually? Let's talk about. Disclaimer: This is not a very serious talk, mostly …

TypeScript and React are inseparable. What's the secret to their successful union? Quite a lot of surprisingly strange code. Learn why useRef always feels weird, how to wrangle generics in custom hooks, and how union types can transform your components.

React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering

Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.

Typically I talk a lot about deeply technical concepts like TypeScript, type systems, (im)mutability, MobX, Immer etc. But this time it's going to be personal and I'll share lessons, good and bad, about growing as an engineer. I've been leading open source projects, short lived projects as a freelancer and I went through the transition of engineer to tech lead twice. Both at a young startup and at Meta. This talk will be about personal experiences, unpopular opinions and even actions, and anything else that might be counterintuitive. Join for some take-aways for anyone aiming at an engineering focused career. Probably I will be wrong about most things, so don’t miss the opportunity to follow up afterwards!

Writing fluid user interfaces becomes more and more challenging as the application complexity increases. In this talk, we’ll explore how proper scheduling improves your app’s experience by diving into some of the concurrent React features, understanding their rationales, and how they work under the hood.

We've heard a lot about React's Fiber Architecture, but it feels like few of us understand it in depth (or have the time to). In this talk, Tejas will go over his best attempt at understanding Fiber (reviewed by other experts), and present it in an 'explain-like-I'm-five years old' way.

I want to provide an in-depth overview of the important concepts behind reconciliation. We'll then explore how React uses the algorithm and go through a few magic words we hear a lot, like coroutines, continuations, fibers, generators, algebraic effects and see how they all relate to React.js.

With concurrent mode coming in React 18, let's talk about the complexities behind providing declarative APIs for concurrent rendering. While implementing concurrent mode APIs from scratch for Brahmos.js, I came across lot of use cases and variability which made it one of the most interesting problem to solve, and appreciate more the React's effort on advocating Concurrent UI. In this talk we will see what concurrent mode means for a web app, what are the internal complexities and how I solved it for Brahmos.js.

React 18 introduces new APIs for rendering applications asynchronously on the server, enabling a simpler model for architecting and shipping user interfaces. When deployed on edge networking platforms like Cloudflare Workers, we can get dramatic performance and user experience improvements in our applications. In this talk, Sunil will demo and walk through this new model of writing React applications, with some insight into the implications for data fetching, styling, and overall direction of the React ecosystem.

If you’re building a dashboard, analytics platform, or any web app where you need to give your users insight into their data, you need beautiful, custom, interactive data visualizations in your React app. But building visualizations hand with a low-level library like D3 can be a huge headache, involving lots of wheel-reinventing. In this talk, we’ll see how data viz development can get so much easier thanks to tools like Plot, a high-level dataviz library for quick
&
easy charting, and Observable, a reactive dataviz prototyping environment, both from the creator of D3. Through live coding examples we’ll explore how React refs let us delegate DOM manipulation for our data visualizations, and how Observable’s embedding functionality lets us easily repurpose community-built visualizations for our own data
&
use cases. By the end of this talk we’ll know how to get a beautiful, customized, interactive data visualization into our apps with a fraction of the time
&
effort!

Documentation is often your community's first point of contact with your project and their daily companion at work. So why is documentation the last thing that gets done, and how can we do it better? This talk shares how important documentation is for React and React Native and how you can invest in or contribute to making your favourite project's docs to build a thriving community

Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!

Join me in a thought-provoking discussion on Bringing Controversial Ideas to React.js, where we will explore some of the most debated topics in the React ecosystem. This talk delves into the concepts of mutability and observability in React and compares them to frameworks like Solid.js and Svelte. We will also discuss the debate on granular updates versus Reconciler and the potential of a plugin system to extend React applications, and the impact it could have on the React community. Attendees will gain a deeper understanding of React's challenges and controversies compared to other frameworks and how the community is addressing them.

Machine learning is seen by many as the next step in artificial intelligence towards a new stage of human evolution. And thus helps us find new approaches to solving real-world problems. Phew... That sounds complex… And how is that supposed to be fun? Well, in addition to the big issues of our time, it is ultimately just another tool that we can play with. While it is important to first understand the core concepts of machine learning, we can quickly go way beyond that. Get ready for some unexpected examples of how to get started with machine learning in your React application!

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.

Have you ever questioned whether Javascript is a viable alternative to Python or R for creating machine learning models? After all, a 2019 survey by Stack Overflow found that Javascript is the language that developers use the most. Given that machine learning models like neural networks require a lot of computational power and that javascript was not intended for high-speed computing, this approach seems unreasonable. But hold on, this not entirely true, as javascript libraries like Onnx.js and Tensorflow.js are here to save the day! I'll be going into further detail on how to create intuitive and innovative machine learning applications with React in this talk.

In this session, I will discuss our experiences in overcoming performance limitations while developing React components for web apps on low-end embedded devices such as Smart TVs. I will share actual application cases from the development of millions of webOS Smart TVs and show how we improved user input response and app launch time. The ideas and techniques shared will be beneficial to developers facing similar challenges.

So CRA is no more and it probably was about time. The React docs suggest Next, Remix or Gatsby...but you're not ready yet for a full-blown React Meta-Framework and really just want pure React. Any alternatives? In this talk, I'm going to explore exactly that. We've got 7 minutes, so no slides, just code where we're going to set up a new React standalone application using Nx.

WASM has taken over the web-development scene in the past few years. It is a language that can be run by the web platform alongside with Javascript. Being treated as a target language, a variety of low-level, statically-typed languages such as C++ and Rust can be compiled to WASM. Thus, a variety of complex, computationally intense applications can now be tackled through readily available web applications. Demos of 2 such applications are shown in the presentation and a side-to-side comparison is done next to JS code.

Meta frameworks are increasingly popular. People dunk on React all the time. Are you insane for still using React? The talk is going to cover how real companies make this evaluation of which framework to choose. It's talking about the advantages of using React, primarily focusing on the positives but also offering constructive thoughts on why you might not want to.Should you use React in 2023?

It’s the hooks rule number one: “Only call hooks at the top level”.
But what if I told you that this rule does not apply to every hook? One of them can actually safely be used conditionally. 
To understand how useContext is different from other hooks, and why it is exempted from this major rule, we need to know why this rule exists in the first place. We will build our own mental model of react’s rendering behavior, focused on how react keeps track of data at runtime: props, states, refs… and context values.

An early look at using server components via Bun’s new bundler, with and without React.

This talk gives an introduction about MediaPipe which is an open source Machine Learning Solutions that allows running machine learning models on low powered devices and helps integrate the models with mobile applications. It gives these creative professionals a lot of dynamic tools and utilizes Machine learning in a really easy way to create powerful and intuitive applications without having much / no knowledge of machine learning beforehand. So we can see how MediaPipe can be integrated with React. Giving easy access to include machine learning use cases to build web applications with React.

Did you know that Chrome extensions, or web extensions, are written in plain HTML, CSS, and JavaScript? That means you can use React to write fully featured and sophisticated web extensions using the web development skills you already know. During this talk, we'll go over the basics of web extension development, how to set up a build process for an extension using React, and review a fully functioning extension that's in the Chrome web store right now!

What is a generic component? How to write them? When to use it?

Did you know that about 250 000 websites are published every day? The majority uses too heavy fonts, unnecessary images or utilises redundant libraries generating carbon footprint. ec0lint is a tool for frontend developers that mitigates the carbon footprint of websites by showing tips on how to create a more climate-friendly code. Thanks to code optimization ec0lint can help in reducing emissions from 1.8 g to ~0.2 g per one view saving 216 kg CO2 for each website (-88%!) annually.

We already know, ""if some task takes time, promisify it!"". But some tasks can be computation heavy and can take time to complete, so making them async is of no use since those have to be anyway get picked. Solution? Simple, multithreading! Yeah I know that React and in turn javascript is single-threaded but what if I told you that our life was a lie ever since? Enter web workers! Key takeaways of the talk: 1. An example of a simple product search showing why async js or concurrent mode cannot work. 2. Demystifying web workers. 3. How they make this magic happen under the hood? 4. The Question of life - Aren't they same as concurrent mode? 5. Comparing the same Product list app using web workers, diving deep into the performance. 6. How one can easily misuse web workers and how to avoid it.

There are amazing tools out there providing you with excellent type safety. But when you get to the client-side fetching, things go wild. Even if you have perfectly typed backed, you lose the type information during the client-side communication. Yes, you can use GraphQL or protobuf and generate types, but... what if I told you there's an easier way? A way that lets you develop your apps smoother than with REST or GraphQL? How? RPC! Say hi to maximum productivity with fantastic developer experience.

With React 18 the long awaited concurrent features are now available to the public. While they technically do not introduce new restrictions about how we build our components, there are many patterns that previously worked but might now introduce subtle bugs in your apps. Let's re-learn the rules of React so that we can stay safe in this new concurrent world.

Emerging build tools such as Bun, ESBuild, SWC and Rome will transform how we work with React in the future. Let's take a look at their current state, look at what's needed to adopt them and predict how the landscape will evolve.

How many times in your developer career you forget to remove an event listener? Close web socket connection? Unsubscribe from updates from any source? Or you are just to run some cleanup tasks, but every time you should do it manually. In this talk, I will show a new concept “Lifetime”, which will change your mindset about solving the problems above, make it all easy and even automated. I will show how I use it in everyday development and how it makes my application better and secure. I will also show how it improves DX and productivity. And I believe it’s something your team might want to use too.

What's React like if you come from a C#/C++ and Unity background? Making tools is easy, but can you ship a whole game with it?

Remix entered the stage with a unique and refreshing take on how to develop on the web. But how do you integrate it into your existing ecosystem of applications? Do you want to test-drive Remix on a small project, or do you want to go full-in, but it is tricky to do a big-bang migration from your existing React app? In this talk, we're going to explore how a monorepo-based code organization can help integrate Remix with your existing React and TypeScript infrastructure, facilitating high code reuse and a migration path to Remix.

The Great British Public Toilet Map is an open source, community driven project dedicated to helping people find toilets across the UK, with around 14,000 loos recorded and counting. In 2021 we took on the challenge of migrating the project from a SPA React app written in JavaScript to NextJS and Typescript. Together we'll discover why we decided it was time to migrate, the myriad technical challenges we faced along the way, how this work benefits our users, and the many exciting plans we have for the future.

React is so powerful that it can be used for more than frontend development. E.g. creating UI programmatically in the backend using a rule-based system or machine learning is another use case where React can serve as the best fit. Similarly, documentation earlier used to have only .md files but now it also includes .mdx file that contains React code. To fulfill such use cases, developers need to understand the internals of React and the tooling around it. Some great sources are popular codebases such as create-react-app, Next.js, etc. In this talk, I will share the lessons we learnt while creating a framework that achieves more than web development using React. Firstly, I will cover how create-react-app codebase is the best codebase to understand how webpack, babel, eslint, typescript etc. can be used alongside React. Secondly, I will share how Next.js teaches us to create a js framework where we can write backend and frontend in the same file and still be able to separate the two during calls. Thirdly, I will share how our framework supports plugins, i.e. the React code resides in multiple repositories but all of this code can share a single React runtime inside the browser. This is a very advanced use of React that cannot be achieved by code splitting using React.lazy. This talk will enable developers to use React for more than frontend development.

Server components is an exciting new feature introduced in React 18. It lets us leverage the fast performance of the server by offloading work behind a component to the server. Why would we want to do that? because server has direct access to data source .so fetching data, making aPI calls would be really fast on the server. The most amazing thing about RSC is that they add 0 kb to the client bundle. So not only RSC reduces the bundle-size but will also improve page load times, eventually providing better user experience. In this talk I will be talking about what react server components are, why do we need them . RSC is often confused with SSR but we will see how they are fundamentally different. We will create a small react application using server components and see the performance benefits. We will also see the challenges we might face when we use RSC in our normal react application. Finally we deep dive into React’s brain and see how things are happening under the hood.

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.

This talk shares how to achieve Server-side rendering using WebAssembly and WASMEdge which is a WebAssembly Runtime. The talk also covers the benefits of using WebAssembly to achieve Server Side Rendering. The talk will also cover a demo on how to launch a React application using the WasmEdge runtime.

React and the JavaScript ecosystem seems to be constantly changing. Wherever we look, there are new libraries and frameworks. These new tools always lead to learning concepts that are often non-transferable knowledge. What if I told you that by learning standard web APIs, relearning the web, and getting a bunch of transferable knowledge, you can also start using a fantastic new addition to the React ecosystem: Remix!

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.

If you think that static rendering is limited to generic and public content that is the same for every user of your website, this talk is for you. Segmented Rendering is a new pattern for the Jamstack that lets you personalize content, statically, without any sort of client-side rendering or per-request Server-Side Rendering. Get the best possible performances for use cases such as theming, internationalization, A/B testing, multi-tenancy, and start treating your users right!

How better to learn about the capabilities of a technology than to do something it was expressly not designed for? What can we learn about the square peg as we mercilessly shove it into the triangular hole? In an attempt to rebuild Age of Empires 2 using React we'll learn about the limitations and possibilities of the tool we use everyday.

Web developers are forced to fit in a box. At some point you have to focus on either being a frontend engineer, backend engineer, etc. On the other hand, we are creatives and we want to explore. How can Amplify help you break out of that box and work on whatever you want, from design to deployment without losing momentum?

AG Grid is the industry standard JavaScript datagrid for building data centric Business Applications. Recently the AG Grid team redesigned the grid to implement the React Rendering Engine in 100% React code. Given the complexity of a datagrid, this was a very challenging task. Hear from Sean, Lead Framework Developer at AG Grid, about the journey of this migration including how this was achieved, lessons learned along the way, and how it will impact your React applications using AG Grid.

When working on component library for a specific company, you want to make it easy as possible for developers to follow the recommended path quickly. Sometimes, that’s not easy. But, when there’s a way, there’s a will! Come see some hacks I have added to our codebase to enable a good API

Accessibility is often left as an afterthought in the software development cycle. However, with 5 simple techniques, we can build accessibility in our apps from the get-go. In this talk, I will talk about how to test for accessibility, aria tags you need to know, and how to use them. We will see a walkthrough of how jarring a non-accessible app can be for users, and how to fix it. We will also look at how Slack has built an accessible app while going above and beyond.

There is a lot of hype and interest around diving into the Web3 space, and it can be hard to manage the information overload and the emphasis on learning new languages to work on smart contracts. Many developers in the frontend space ask, “How much of this new information do I need to transition into web3?” The truth is as a React developer, the skills I know are essential in web3. Let’s add some context around how to leverage those existing skills to succeed in this new space.
In this talk, we’re going to explore how to build the correct context and the technologies to understand to help you dive into web3 as a front-end developer. We’ll go over popular packages like Ethers, which can be used in React applications to interact with wallets and existing smart contracts. We will also explore how you can leverage your Javascript skills to build full-stack dApps using managed services like Moralis and Thirdweb.
Let’s demystify some of the concepts in web3 and leverage our existing skills to start building.

Loading…, Loading something else…, Finally loading one more thing… This doesn’t sound good right? Yeah I too feel the same 😔
Loaders are indeed a great way to provide feedbacks to users that “something is happening”. But they can be easily misused, and that day comes when we see tonnes of loaders popping in our UI, defeating its purpose. Enter Suspense and SuspenseList in React!
What if you could think “what parts to show a loader so that I see very less loaders”? What if you could also control the order in which they should appear? Let’s dive a bit deep into this problem and think of “right loader orchestration” experience instead of “just loaders everywhere”!

React is strong at UI development but lags with actual game development. Game engines are great for that but bad at UI. How to combine both?

Developing for each platform individually is so 2010s. These days, with React Native’s component system providing base-level UI constructs, we can efficiently develop for every platform while not sacrificing any particular platform’s uniqueness. Taz will review the approach they’ve taken while developing Guild, and the creation of their Mondrian cross-platform responsive design system as well as how they’ve accommodated the differences in navigational experiences across platforms to accomplish a codebase that can be 95+% shared across every platform.

DAZN is the fastest-growing sports streaming service and during this talk, we will consider our experience building tv applications (for ps5, xbox, LG, Samsung and other targets) with micro frontend architecture. You may expect time travel to see how it started and what we have at the moment, what makes tv development different compared to the web, same as techniques that allow us to share code between targets. You will learn how we test our application with an in-house remote testing lab as well as our deployment and release process.

React is a fantastic tool to implement complicated applications fast, we all know it. But are they going to be fast when implemented fast? Let’s talk about re-renders and their danger in react: how easy it is to make a mistake, why some small mistakes can have a huge downstream effect, and how to avoid and prevent them.
This is a deep-dive type of talk, that focuses on why React components re-render, what kind of performance impact it can have, and what to do about it

What are the opportunities available to web devs in web3? What problems are they likely to face transitioning to web3? How the Decentology's Hyperverse solves these problems and can help them avail of these opportunities.

React has a great security standard as default, but if you don’t pay close attention to the details you could get burned by some of the escape hatches APIs, or even by just passing props insecurely to components. I’ll teach you how to avoid these pitfalls.

Teams are getting bigger by applying micro-frontends using React, but complexity tracking production issues can become extremely confusing when no clear responsibilities are met. That’s when observability for teams and applications on a scale becomes even more important, in order to be able to identify potential issues in production, separate the concerns and the responsibilities among them. In this presentation we’ll learn how we can achieve this.

React developers intrigue us with the so-called React Forget compiler [that’s supposed to inject useMemo and useCallback into code automatically]. However, we still can't figure out best practices for useCallback, useMemo, and React.memo when we write it on our own. The worst scenario is if we continue to put it everywhere without understanding. As a result, it can bring noticeable harm to the performance of our application. In this talk, on real-life use cases, you will see solutions to the problem of using hooks wrong or overusing them!

Join me as a I dive into the history of React Table and discuss everything it’s taught me (both successes and failures!) since I built the first component-based version 5 years ago. We’ll cover tons of sub-topics including, but not limited to: .... takes a breath ... Headless UI, React Hooks, Advanced TypeScript, Branding
&
Naming-Things, Build Pipelines, Open Source Software, API Design, React/JavaScript performance and even Framework Agnostic Tooling!

Your team has just hired a React Developer to work on your Typescript codebase. Both your team and the new engineer are eager to start building features, but they only have experience writing Javascript. How can you quickly onboard the engineer to Typescript while still providing them with time and space needed to learn the language effectively? In this talk, we’ll discuss why Typescript fundamentals, like function types, interfaces, and generics, can be intimidating for learners. Then, we’ll walk through successful, practical approaches for teaching each of these concepts and relating them back to React. By the end of this talk, you’ll have the building blocks for creating a fruitful onboarding session for your engineers.

Blitz was created as a fullstack React framework, inspired Ru on Rails, and with a goal to make you as productive as possible! It features a ""Zero-API"" data layer abstraction, has authn
&
authz out of the box and a few more exciting features. However, we recently decided to pivot Blitz to a framework agnostic toolkit, which means a huge and thrilling change for the Blitz community. During this talk, I will introduce the core concepts, talk about the why
&
how of the pivot, and give you a glimpse of Blitz's future.
You can check the slides for Aleksandra's talk
here
.

Modern frontend frameworks like React are well thought-of in their application security design and that’s great. However, there is still plenty of room for developers to make mistakes and use insecure APIs, vulnerable components, or generally do the wrong thing that turns user input into a Cross-site Scripting vulnerability (XSS). Let me show you how React applications get hacked in the real-world.

There’s no arguing that building accessible websites is a force for good. But ensuring that our React websites and apps work for everyone can be time-consuming and isn’t always easy to get right. Luckily, investing a little bit of time on your accessibility workflow and setting up a series of automated tools will end up saving you tons of time and energy in the long run.
In this talk I will demonstrate how you can leverage automated tools, clearly documented code standards and a well-defined development process in order to make building and testing accessible React apps a breeze. I will discuss the ways that I automate certain aspects of my development workflows to catch accessibility errors, define and set up tests and go through the entire lifecycle of accessibility feature development using a real-world example.

This talk will go briefly about the history of how Mojang Studios decided to use web standards and React to build the new UI stack for Minecraft (Bedrock Edition), the challenges we faced around performance and how we landed on a solution that allowed us to continue to write declarative UI, but without the virtual DOM.

React Query manages server state on the client, and auth manages user sign in/sign up/sign out. Where do these two overlap, and how do you separate concerns? This talk proposes a data flow with custom hooks for both auth and React Query to manage authentication status and user profile updates.

If you’ve worked with the React useState hook before, you might have wondered why global state management can’t be just as easy. Why do we still need so much boilerplate to manage state with the Context API? What if we don’t want to be constrained opinionated tools like Redux Toolkit or forced to use actions and reducers in our React applications? This is where Hookstate comes in. Hookstate is not just another state management solution. Apart from being feature-rich, fast, and flexible, the library takes the idea of simplifying state management in React apps to a whole new level. In this talk, I’ll introduce Hookstate as a simple and efficient state management solution for React applications.

In this lightning talk, you will see:
The lack of visibility on React applications
How to install the Sentry React SDK
How Sentry can help you identify errors and slowdowns within your React App so you can see faster, solve quicker and continuously learn from your applications

A look behind the scenes of how React server components work.
In this session we'll take a look at React server components looking at:
- the basic concepts behind them
- the type of data communicated between the client and server
- how this data is built
- a look at what's running on the server side
- what this might mean for future projects

A group of volunteers all over the world is working on React and React Native apps for the ADHD America program (non-for profit organization). In our work we use Recoil - quite a new React state management tool that looks quite promising. I'll show how we use it in both apps - for web and for mobile and explain why we decided to try it.

There are some great libraries that help with i18n in React, but surprisingly little guidance on how to handle i18n end-to-end. This talk will discuss best practices and practical advice for handling translations in React. We will discuss how to extract strings from your code, how to manage translation files, how to think about long-term maintenance of your translations, and even avoiding common pitfalls where single-language developers tend to get stuck.

How to use MDX in React-Native to great effect and the challenges you didn't know you signed up for.

One of the biggest pain points when developing an app is the tricky business of managing state, race conditions, etc. Finite state machines can help eliminate such bugs entirely while providing a welcome, structured way to build components. Looks cool? Let’s build one, it’s even cooler!

We need to stop building expensive React components — components that promise the world but are impossible to maintain. Let's fight the apropcylpse and set aside our prop drills with this proposal for a more productive way working in React.

We use them all the time, and we think we know state hooks work (useState, useReducer). But under the hood, as expected, things are not what you imagine. This talk is about update queues, batching, eager and lazy updates, and some other cool things learned from looking at Hooks source code. It also contains practical takeaways that will help you better understand and debug your code.

This talk looks at how components in React have evolved. We'll look back at previous versions of React, the headlining features, and how milestones like Fiber and Concurrent changed how we wrote React components. Some more details: I want to give attendees a glimpse of how React components looked at different major points in the history of React. Components written in 2013 don't look like components written in 2015 or today. This is a history of React that for some will be a walk down memory lane and for others, completely new information.

Hopin is the fastest-growing startup in the world. Many engineers join every month. Companies with different technologies are acquired every other month. It brings many challenges to our front-end architecture. In this talk I'll explain how we're breaking up our React monoliths and enabling interoperability using multiple React trees and reactive variables.

Gats v4 now has SSR and a new rendering mode called DSG. Between SSG, SSR, DSG, ISR and DPR, the Jamstack has recently seen a flurry of new rendering modes that work for every use case that seemed unviable in the past. But knowing what to pick for your site or a portion of your site and what each of these really do under the hood is confusing and easy to do incorrectly.
This track will clear the confusion and dive deep into each of these, discuss nuances and even peek under the hood to see how they work and what scalability and consistency promises they offer and which promises they keep.

Decentralized apps (dApps) are continuing to gain momentum in the industry. These developers are also now some of the highest paid in the entire trade. Building decentralized apps is a paradigm shift that requires a different way of thinking than apps built with traditional centralized infrastructure, tooling, and services – taking into consideration things like game theory, decentralized serverless infrastructure, and cryptoeconomics. As a React developer, I initially had a hard time understanding this entirely new (to me) ecosystem, how everything fit together, and the mental model needed to understand and be a productive full stack developer in this space (and why I would consider it in the first place). In this talk, I'll give a comprehensive overview of the space, how you can get started building these types of applications, and the entire tech stack broken apart then put back together to show how everything works.

Everyone has a pattern library or dreams about having one. We went through conversations and the codification of our visual dictionary and then we ended up with a beautiful living document.
But what happens when we need to re-use our components and they don’t fit in the design? How do we re-use our patterns in slightly different use cases?
We have all the tech to make a front end really modular, we have techniques and methodologies which enabled us avoiding the bad parts of the languages we use. Every part of the puzzle seems to be falling in the right place.
Yet, sometimes we are struggling in handling the variations of our patterns in a reliable and maintainable way. Our codebase is getting filled with exceptions and overrides and refactoring of base patterns becomes impossible.
Not a recipe for success, more of a way to frame the problem, identify some ideas we tried and re-discuss the way we approach componentisation.

There is generally a good understanding on how to render large (say, 100K items) datasets using virtual lists, …if they remain largely static. But what if new entries are being added or updated at a rate of hundreds per second? And what if the user should be able to filter and sort them freely? How can we stay responsive in such scenarios? In this talk we discuss how Flipper introduced map-reduce inspired FSRW transformations to handle such scenarios gracefully. By applying the techniques introduced in this talk Flipper frame rates increased at least 10-fold and we hope to open-source this approach soon.

All the React you've seen is presented one way: as a linear text file. There's good reason for this. Textual syntax is an ideal medium for constructing abstract logic. It's quick to write, informationally dense, and endlessly flexible. However, brevity has its downsides. What information can't we see in static text? How can visual representations and metaphorical comparisons expand our understanding of how React works? Come find out what happens when we explore alternate ways of seeing React.

React is a great library to design user interfaces, but what about rendering sounds? In this talk we'll dive deeper in handling sounds, creating a transformation to convert any input vibration into images.

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.

I'll present a practical approach to styling react components, a folder structure and documentation structure that's very easy to follow (for onboarding members) + other insights I got while using this approach.

Quick tips on how to utilise the native mobile platform to help provide your users an upgraded experience with sounds, vibrations and animations. Small changes can have a huge difference UX-wise.

We’re generally afraid of the future. Not only is it unknown, but there’s quite a lot of reasons to believe we’re practically doomed. And it doesn’t help that we’re negatively wired nature, programmed to look out for risks more than search for rewards. Developers especially so.
So with this speech, I want to paint another picture for you. I genuinely believe, the future of work is enjoyable and definitely worth pursuing. And you can have that. Right after this speech.

Modern frontend frameworks like React are well thought-of in their application security design and that’s great. However, there is still plenty of room for developers to make mistakes and use insecure APIs, vulnerable components, or generally do the wrong thing that turns user input into a Cross-site Scripting vulnerability (XSS). Let me show you how React applications get hacked in the real-world.

We often talk and hear about scaling in production, but we rarely talk about scaling development. Aspects like structuring and organizing your codebase, code sharing across teams, speeding up build and test runs can play a huge role in terms of productivity for a developer team. That impacts small teams but gets even more evident as your team grows and especially for large enterprises.
In this short talk I'm going to demo Nx and what it can do for you to help you modularize your React code, generate code for you, help you build faster and much more. Tune in to learn about the build framework you've been missing in your tool belt!

How to properly hide modals / dialogs / drawers functionalities behind buttons that spawn them without cluttering container components.

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.