Dive into the world of React with Kent C. Dodds and his expert guests in the Epic React interviews. Each interview features an in-depth conversation with a React expert, library creator, or community leader, offering unique insights and practical advice for developers at all levels.

From exploring React 19's latest features to building accessible and performant applications, the Epic React interviews cover a wide range of topics that will help you enhance your React skills and stay up-to-date with the latest trends. Whether you're interested in open-source contributions, server components, or developer well-being, you'll find valuable knowledge and inspiration in every interview.

### Getting into Open Source with Aakansha Doshi

Aakansha Doshi, maintainer of excalidraw, shares her experience contributing to open-source projects and discusses the new features in React 19 that excite her most.

### Enhancing Forms using React 19 with Aurora Scharff

Aurora Scharff, React consultant and speaker, dives into her recent talk on using React 19's new hooks and server components to build better forms.

### Jenna Smith on AI, Building Radix, and Tokenami

Jenna Smith discusses her work on the Radix component library and her latest open-source project, Tokenami, a type-safe CSS solution for modern front ends.

### Bringing Server Components to React Native ft. Evan Bacon

Evan Bacon, creator of Expo Router, demonstrates how React 19's server components can be used in native development, enabling new ways to compose web and native development.

### Kateryna Porshnieva on Building Accessible Apps with React 19

Kateryna Porshnieva explores how React 19 makes building accessible applications easier and shares her processes for ensuring accessible code.

### React's Evolution: Past, Present, and Future with Lee Robinson

Lee Robinson, React expert and educator at Vercel, shares his insights on React's past, present, and future, and provides advice on building communities around open-source projects.

### Matt Brophy on Remix, React Router, and Open Source

Matt Brophy, a core member of the Remix team, discusses the evolution of Remix and React Router and shares his experience in open-source development.

### Michelle Beckles on Community Building and Developer Health

Michelle Beckles, organizer of React Miami, shares her experiences in building local tech communities and promoting healthier work environments for developers.

### Under the Hood of React 19 with Rick Hanlon

Ricky Hanlon, a software engineer at Meta and member of the React core team, discusses React's evolution and upcoming features like actions, `useActionState`, and `useOptimistic` hooks, which improve asynchronous event handling and state management.

### Sam Selikoff on React's Impact in Modern Web Development

Sam Selikoff, a front-end engineer with experience in multiple frameworks, explores React's simplicity, component model, and API advancements, as well as its influence on other frameworks and the future of full-stack development.

### Lydia Hallie on JavaScript, React, and the Future of Web Development

Lydia is a self-taught developer passionate about understanding JavaScript deeply. She talks about React 19's closer alignment with web standards and future AI impact on web development.

### Sebastian Silbermann on Testing, Tooling, and Transitions With React 19

React core team member excited about React 19's debugging capabilities and future testing enhancements. He talks about challenges with async testing and component state handling.

### The Importance of Accessibility in Modern Web Development With Shruti Kapoor

Slack accessibility engineer emphasizes importance of integrating accessibility from project start. Shruti shares resources for developers to improve accessibility skills.

### Sunil Pai on Changing Lives with Powerful Software, PartyKit, and Durable Objects

Cloudflare developer explains Durable Objects technology, comparing it to personal computers versus serverless functions. Sunil discusses use cases and tradeoffs.

### Theo Browne on His Personal Experience as a Web Developer

YouTube content creator discusses React's evolution, particularly server components. Highlights improved client-server composability and shares real-world application examples.

### Dominik Dorfmeister on His Open-Source Journey

Open-source contributor turned React Query maintainer. He highlights useQuery hook and the importance of separating server state from UI state. 

Discover the latest trends and techniques in React development with Kent C. Dodds and expert guests. 

Kent sits down with AaKansha Doshi to talk about open source and new React 19 features.

Getting into Open Source with Aakansha Doshi

Kent talks with Aurora Scharff about how awesome React 19 makes building forms with Server Components and new hooks.

Enhancing Forms using React 19 with Aurora Scharff

Jenna Smith and Kent talk about the origins of the Radix component library and a new CSS solution that Jenna is working on called Tokenami.

Jenna Smith on AI, Building Radix, and Tokenami

Kent chats with Evan Bacon about a server-driven, native GPT clone that is built in React Native and what RSC's mean for native development in the future.

Evan Bacon brings React Server Components to React Native

Kent and Kateryna sit down to talk about what accessibility looks like in React today and how we can ensure we ship accessible code.

Kateryna Porshnieva on Building Accessible Apps with React 19

React's Evolution: Past, Present, and Future with Lee Robinson

Matt Brophy, core Remix team member, discusses the evolution of Remix and React Router, new features, and his journey in open-source development.

Matt Brophy on Remix, React Router, and Open-Source

Michelle Beckles discusses the success of React Miami, building local tech communities, and promoting developer well-being through the DevHealth OS.

Michelle Beckles on Community Building and Developer Health

React core team member Ricky Hanlon discusses upcoming features, design philosophy, and the future of React. 

Under the Hood of React 19 with Rick Hanlon

Sam Selikoff discusses React's evolution, impact on frameworks, and future features with Kent. Explore insights into React's simplicity and upcoming changes.

Sam Selikoff on React's Impact in Modern Web Development

Kent and Lydia Hallie chat about the Ecmascript spec, how React 19 improves web development, and the role of AI in the web dev landscape.

Lydia Hallie on JavaScript, React, and the Future of Web Development

Kent and Sebastian talk about what React 19 enables for future releases of React as well as the future of testing in React.

Sebastian Silbermann on Testing, Tooling, and Transitions With React 19

Kent and Shruti talk about Shruti's experience getting into accessibility and how she has leveled up as a web developer by building more accessible React apps.

The Importance of Accessibility in Modern Web Development With Shruti Kapoor

Kent sits down with Sunil Pai to talk about leveraging AI as a web developer, PartyKit, and Cloudflare Durable Objects.

Sunil Pai on Changing Lives with Powerful Software, PartyKit, and Durable Objects

Theo Browne on His Personal Experience as a Web Developer 

Dominik Dorfmeister on His Open-Source Journey 

Interviews With Experts

Kent Interviews experts on various topics

Creating Open Source Libraries with Tanner Linsley

Animations and Interactions with Josh Comeau

Next.js and Vercel with Guillermo Rauch

Building React-based Design Systems with Ben Ilegbodu

The React Ecosystem with Tejas Kumar

Encapsulation and Styling with Michael Chan

3D Animation in the Browser with Paul Henschel

Best Practices for Maintainers with Jenn Creighton

Breaking into Tech with Samantha Bretous

Best Practices of Server-Side Rendering with Monica Powell

Mock Service Worker (MSW) with Artem Zakharchenko

React and React Native documentation with Rachel Nabors

React Developer Tools with Brian Vaughn

Epic React v1 Expert Interviews

Starting with an HTML file and a script, you'll learn React API to build components and manage forms. Learn the fundamentals of building on the web with React.

React Fundamentals

Kent C. Dodds

Learn everything you need to be effective with the fundamental building blocks of React applications. 

The path of this workshop takes you from the fundamental API of appending DOM nodes, through React's raw APIs, to how JSX compiles into React's methods.

Once you have a firm grasp of what React is doing with creating elements, you'll learn the other tools you need to build webpages like: styling, forms, and inputs. 

But, this isn't just a native web course. 

**You'll be building a strong foundation in React.** 

Learn how to: 

- build reusable components
- leverage TypeScript with React
- catch errors with Error Boundaries
- render arrays properly with the `key` prop. 

When you’re finished, you’ll be prepared to create and use React components to build excellent experiences for your app's users.

## Hello World in JS

You'll start your journey by learning some of the history of how we went from generating HTML on the server and adding JS on top to full-fledged frameworks. 

To learn React you'll be following a similar path and begin by learning how to manually append your own DOM nodes.

I call this "going down to level up." You'll find yourself much more efficient with React if you understand the fundamentals of the DOM and JavaScript!

## Raw React APIs

Before getting into JSX, you'll learn how to work with React and ReactDOM's raw APIs. 

You'll create React elements with `React.createElement` and learn how compose your elements with calls to this function. Then, you'll render the React elements you create using ReactDOM.

## Using JSX

Once you know what React is doing under the hood, you'll be prepared to learn JSX.

This section covers more than just how to write it, you'll also use babel to experiement with how JSX gets compiled to the raw React APIs!

## Custom Components

Just like in regular JavaScript, when you want to reuse code, you write functions. If you want to share JSX, you can do that as well. 

In this section you'll learn about how in React, we call these functions "components", the special properties of these functions, and how to 

## TypeScript

> TypeScript is not making your life terrible. It's just showing you how terrible your life already is. 
 
*- Kent C. Dodds*

Getting a solid hold of TypeScript from the get-go will set you up for success. Since React components are just functions, there aren't any special considerations when applying type annotations. 

So, you'll be working on two things:

1. Improving your TypeScript skills
2. Learning the React-specific types available

## Styling

In this section you'll learn about the two primary ways to style React components:

1. Inline styles with the `style` prop
2. Regular CSS with the `className` prop

You'll also learn why React uses a `className` prop instead of `class`. 👀

## Forms

In React, there actually aren't a ton of things you have to learn to interact with forms beyond what you can do with regular DOM APIs and JavaScript.

Here, you'll learn the form markup, build an onSubmit handler, and then create a form action. 

## Inputs

There's a ton of different input types and you're going to learn a lot about them here!

You'll learn about the different text inputs, check boxes, radios, hidden inputs, how to make sure everything is properly labeled and accessible, and setting default values and default checked boxes. 

## Error Boundaries

This is something you want to learn early on. Sometimes things go wrong and we need to handle errors and display useful information to the user. 

An ErrorBoundary component doesn't ship with React by default. So, you'll be importing one from react-error-boundry and then learning how to compose it, and then give the option to the user to reset. 

## Rendering Arrays

In React you can render arrays of elements. One of the tricky parts about it is the `key` prop. 

In this section, you'll learn in detail why React needs the `key` prop to keep track of elements and the nuances of the value that is used. 

Finally, you'll learn a cool trick where the `key` prop is used as a mechanism for resetting elements in the DOM!


In this workshop, we'll learn how to use hooks to manage state, synchronize side-effects, generate unique ids, and more. 

**You'll get a solid understanding of the basic hooks and how to use them.**

We'll be covering these hooks: 

- useState
- useEffect
- useRef
- and useId

At the end of the workshop you'll put everything you learned together and build a Tic Tac Toe game with game history saved in local storage!

## Managing UI State

React's App Lifecycle: Initial Render → Create the DOM → User Interacts → State Changes → Re-render → Update the DOM → Repeat.

Here, you'll be learning how to use the `useState` hook and about the cycle of user interaction, state changes, and re-rendering. The core of how React works!

## Side-Effects

In this section, you'll learn about the `useEffect` hook.

`useState` is for component state, and `useEffect` is for managing side-effects (things that happen outside our react components).

Things outside our react components include:

- Browser APIs like local storage, geolocation, media devices, etc.
- Integrations with third-party libraries like D3, Chart.js, etc.


## Lifting State

A common question from React beginners is how to share state between two sibling components. 

The answer is to "lift the state!" 

But, sometimes you'll find yourself in the opposite situation, where you have state that's lifted too high and doesn't need to be shared. So, in this section, you'll also be learning how to "colocate state."

## DOM Side-Effects

Sometimes, you need to update the DOM directly, like if you're needing a library that interacts with the DOM or ar dealing with focus management. 

To do this you'll learn about how to use both the `ref` callback and the `useRef` hook. 

## Unique IDs

Form input elements need to have globally unique `id` attributes. But, you're also building reusable components in React. 

How do you make sure that you're getting unique IDs?

In this section, you'll solve this problem with the `useId` hook.

## Tic Tac Toe

Here's where it all comes together!

You'll practice all the skills you learned over the course of this workshop by building a Tic Tac Toe game with game history that gets perserved in local storage. 

It's tougher than the other exercises. But, after you get through it, you'll have really solidified everything you learned.

Learn React hooks to add interactivity to your apps and build dynamic websites. You'll learn the core React hooks including useState, useEffect, and useRef.

React Hooks

Epic React Basic

Advanced React APIs covers many of the React APIs that you might not see on a day-to-day basis but you will need these in your toolbelt for certain scenarios that pop up.

We'll take a tour of several advanced hooks and React API, their use-cases, and when to use them. 

These will include:

- useReducer
- use
- createContext
- useLayoutEffect
- useImperativeHandle
- useSyncExternalStore
- flushSync
- createPortal


## Complex State Management

First we'll dive into the deep-end of state management with `useReducer`. This hook comes in really handy when you feel the logic in your components is a sprawling mess and you'd like to consolidate that into a single place with a nice API to interact with. 

We'll get into some state optimizations as well as how to make your logic easily sharable throughout your application with custom hooks.

## Context

While context is often times something you will leave up to library authors, there are some cases where you want to expose values you need throughout your application. We'll build a context provider that will expose search params to our components on a blog search page with `use` (previously `useContext`) and `createContext`.

You'll also refactor this code to expose the context you create in a custom hook that will give us nice error handling when context isn't set up correctly.

## Portals

React gives us `createPortal` to render UI outside of the DOM tree structure that a component might sit in. This is useful for UI elements like modals or tooltips. We'll explore how to attach a tooltip to the `document.body` to ensure it's positioned where it needs to go.

## Layout Computations

If the logic that you are working with in a `useEffect` affects the how the UI looks, especially on first render, you'll want to `useLayoutEffect`. You'll work through an exercise where the client makes calculations on where to place a tooltip before rendering and see the difference when this is in a `useLayoutEffect`.

## Imperative Handles

`useImperativeHandle` is an escape hatch in React that lets you imperatively tell React what to do. This hook is typically paired with a ref (from `useRef`) where we want to expose imperative methods to developers who pass a ref prop to our components.

## Focus Management

`flushSync` is technically a 'de-optimization' because it forces React to re-render whenever you call it. This means you need to be very careful and know what you're doing when you use it.

The primary use-case for this API is focus management. When you have conditional UI that gets rendered based on various state conditions, you can `flushSync` to ensure elements are in the DOM to properly focus.

## Sync Exernal Store

There are some cases where we want to synce our React code with the external world and display different UI based on the state of the external world. This is where `useSyncExternalStore` is useful and lets you subscribe to external stores. We'll also touch on server rendering as this hook supports that use-case.

Learn the hooks and API that React has to offer for complex state management, sharing context throughout your app, focus management and more.

Advanced React APIs

Suspense is key to managing async operations declaratively in React. 

It allows you to handle loading states, errors, and other async dependencies more smoothly by rendering a fallback while a promise is pending. 

In this workshop, you'll learn how to:

- Manage loading and errors with Suspense
- Cache promises and use the `useTransition` hook
- Update UI optimistically with `useOptimistic`
- Load images asynchronously with suspense 
- Keep UI responsive with `useDeferredValue`
- Optimize and avoid network waterfalls

Once you're through this workshop you'll have a solid handle on Suspense, which will really improve the UX of your apps and open doors to more advanced patterns in later workshops. 

## Data Fetching

No matter how fast your server is, you need to think about what the user's looking at while they wait. You also need to think about what happens if the request fails.

In this section you'll learn how to manage both of these declaratively in components using `Suspense` and `ErrorBoundary`.

## Dynamic Promises


Here you'll learn how to cache your promises in order to avoid unnecessary re-fetching. 

You'll also learn about transitions and how to make the transition from loading to resolved state smoother using the useTransition hook.


## Optimistic UI

The idea of "Optimistic UI" is based on the belief that most of the time the things your users do will be successful.

In this section you'll discover the useOptimistic hook, which is like useState that actually changes the UI even while it's suspended. 

## Suspense img

Anything async can be suspended, including images! 

This technique involves loading images with promises and using the browser’s native caching system. 

By combining async image loading with Suspense boundaries, you can control rendering fallbacks and ensure images are fully loaded before displaying updated content, avoiding stale UI states

## Responsive

You can run into some problems when using useTransition. For example, if the user is typing in a search box which you're controlling with state, you want to keep the `<input />`'s value up-to-date with what they're typing, not with the previous state while React is waiting for the transition to complete.

So in this section you'll learn how to use the useDeferredValue hook to  display some pending state while also allowing us to display the state that triggered a component to suspend.

## Optimizations

This section is about how to go chasing waterfalls.

Due to the design of Suspense, you can easily create network waterfalls by mistake. 

So what you're really be learning is how to deal with this both on the frontend and the backend. On the front you'll figure out how to trigger requests before use is called. And on the back you'll set cache headers on your responses to tell the client how to cache properly.

Learn how Suspense works under the hood, preparing you for the future of asynchronous state management.

React Suspense

Make your code better than ever by learning the strengths and weaknesses of several advanced patterns.

**After taking this workshop you'll always know exactly what patterns to reach for.**

Running into prop drilling? Reach for some composition patterns.

Are the values you need stale? Use latest ref.

Are you a library author who wants to make a component more flexible? Use the control props or state reducer patterns.

Learning the following patterns will take you far!

## Composition

Avoiding prop drilling is one of the reasons so many people have jumped onto state management solutions like Redux.

In this section you'll learn what you can accomplish just by passing react elements rather than treating components as uncrossable boundaries. 

You'll see how things get quite a bit easier without losing any flexibility!

## Latest Ref

Sometimes, you need to make sure that you are getting the absolute latest version of a value. 

Here, you'll learn how to use the useRef hook to store a value and avoid issues with stale closures in your hooks.

## Compound Components

This pattern can actually be seen in HTML with the `<select>` and `<option>` elements. 

Instead of loading up props with data and trying to build the UI inside the component definition, you will instead learn how you can compose several React components together in the compound component pattern.

## Slots

This flexible pattern is useful for creating reusable compound components that aren't locked into having the same parent every time. 

Slots allow you to specify an element which takes on a particular role in the overall collection of components. So a parent component can have many props available to children with various roles. 


## Prop Collections and Getters

The Prop Collections and Getters Patterns allows your hook to support common use cases for UI elements people build with your hook.

Basically, in this section you'll learn how to create a function that can return props!

Note, the prop collections pattern isn't recommended but it'll be useful to learn since the getters pattern builds on the idea. 

## State Initializer

The state initializer pattern is a way to initialize (and reset) the state of a component in a predictable way.

This pattern is simple but you'll learn that there's a catch if you want to truly ensure that a component is reset to its initial state and ignores any changes made to the values you used initialize it.


## State Reducer

This one is especially useful for library authors.

In this section you'll learn the State Reducer Pattern, which inverts control over the state management of your hook and/or component to the developer using it so they can control the state changes that happen when dispatching events.


## Control Props

Sometimes, people want to be able to manage the internal state of our component from the outside

Learning this pattern will allow you to give control of a component's state to its users so they can make state changes to it themselves. 

Make your code better than ever by learning the strengths and weaknesses of several advanced patterns so you always know exactly what to reach for.

Advanced React Patterns

In this workshop you will diagnose, profile, and fix performance problems in your React application using the Browser Profiler, React DevTools Profiler, and optimization techniques.

There are always trade-offs to consider when thinking about optimization. 

You will be learning optimizaiton patterns in this workshop. 

But, more importantly you'll be learning how to measure the performance of your app, carefully consider the complexity trade-offs of optimization, and understand which optimizations apply to certain situations. 

By the end of this workshop you'll understand how to: 

- Prevent unnecessary re-renders
- Render concurrently
- Lazy and eager load components
- Use memoization and web workers
- and use windowing with react-virtual


## Element Optimization

Gain practical experience optimizing React component rendering. 

Learn to hoist React elements to prevent unnecessary renders, pass elements as props, use React's Context API to trigger re-renders only on necessary state changes, and apply useMemo and React.memo.

## Optimize Context 

Here you'll learn three ways to optimize context: Memoize context values, create a provider component, and split context values into setter functions. 

In addition to the techniques, this will teach you how to use the devtools to determine which ones you need to use. 

## Concurrent Rendering

Sometimes, you're rendering so many components or those components are doing such complex things that you can't afford to render them all quickly enough.

Find out how to use the useDeferredValue hook and memo to prioritize the rendering of some parts of your app over others.

## Code Splitting

Code splitting acts on the principle that loading less code will speed up your app. There are three ways we'll approach it in this section:

Lazy loading, eager loading, and transitions. 

In lazy loading you'll learn how to use React's lazy method for lazy loading components

Eager loading is like a layer on top of lazy loading. You'll learn how to deferr the loading of a component until some event occurs like a mouse over or on focus. 

In transitions you'll learn to optimize the loading experience using the useTransition hook and the useSpinDelay hook from the spin-delay package.

## Expensive Calculations

JavaScript is single-threaded which poses a problem when you need to deal with some kind of expensive calculation. 

React has ways of dealing with this but if you are outside of React-land you'll be blocking the thread while the calculation is being performed. Luckily there are a couple options for dealing with this.

**useMemo** is useful if you're working with indempotent functions. And if you aren't, **Web Workers** let you perform the calculations on a separate thread but they add some complexity  to your code.

Throughout this workshop you'll be learning to measure performance and weigh the trade-offs of all the techniques you learn!

## Optimize Rendering

React is pretty smart about determining when it needs to re-render. But, sometimes there are cases we can get a bit of an edge over it ourselves. 

If your components are re-rendering when a DOM update isn't actually needed, you'll want to reach for memo and memoize your components. 

But, what if memo's built-in comparitor isn't doing the trick? It works off a simple Object.is. Which is great most of the time but if you're dealing with complex props you have the option of passing a custom comparitor function. 

## Windowing

And lastly you'll be exploring an advanced technique for when you're dealing with a truly massive amount of elements. 

There's only so much optimizing you can do when you need to rendering thousands of elements. But, what if you only had to render a slice of them? That's where windowing comes in. 

You'll be using the @tanstack/react-virtual library to virtualize only the visible DOM nodes (and a few nodes outside of view for the fast-scrollers) in a large scrollable element.

Diagnose, profile, and fix performance problems in your React application using the Browser Profiler, React DevTools Profiler, and optimization techniques.

React Performance

React server components (RSCs) are experimental and only used by a few frameworks...

Until this workshop! 

We'll be building this framework without any build tools. This means no TypeScript, no JSX, no Vite, nothing. We're going to be writing plain JavaScript and using Node.js\/browser native APIs to build our framework.

**That's right, you'll be building your own framwork that supports RSCs.**

You'll get into the nitty-gritty detail by: 

- Serializing and streaming your UI on the server to the client yourself with `renderToPipeableStream`
-  Granularly streaming in your server components with Suspense
-  Using Node's `AsyncLocalStorage` to **get context on the server.**
-  Registering and using a Node loader to implement your own "use client" directive
-  Building a full client router with history and cache
-  Implementing server actions

**This workshop follows the pattern of React Fundamentals but it's taken up 10 notches.**

After working through this you'll truly understand React Server Components from the ground up.

## Warm Up

In this section you will warm up by wiring together a hono.js app so that it serves static assets and data from an API endpoint. 

Whatever your server-side architecture, every web application will have these bits!

## Server Components

The idea behind RSCs is conceptually simple. Instead of requesting JSON data and handing that off to our components to generate the UI, we request the UI itself.

You'll learn how to serialize the UI on the server, stream it to the client, and then convert it to React elements that can be rendered in the browser.


## Client Components

To provide a great user experience, we still want to have some client-side interactivity. 

Server and client components can be intermixed but there are nuances to how this is accomplished. Once you complete this section you'll understand why server components can render client components but not vice versa.

You'll also see why the `"use client"` directive is used, and implement the handling of those modules yourself.

## Client Router

Learn to build a client-side router that integrates with your React server components. 

You'll manage navigation without full page reloads, fetch and display updated UI content from the server, and create smooth transitions with pending UI states. You'll also handle browser history for back/forward button support and implement caching.


## Server Actions

This section starts off with implementing the `use server` directive to designate server action functions and manage their serialization process, which, unlike client components, doesn't require full module serialization.  

You'll then build the server-side request handling: extracting action identifiers from RSC headers, utilizing dynamic imports to load the corresponding server-side function, and finally, executing the action and returning the result to the client. 

Finally, you'll explore a couple strategies for revalidating your UI after a server action is executed.


Understand React Server Components and Server Actions by building a framework with them using just the Browser, Node.js, and React.

Professional Epic React Workshops

A collection of exercise-driven, in-depth React workshops.