Kent C. Dodds

Video Guides & Talks

Upgrading from react-query v2 to v3 (
Apr 24, 2021
In this video I'll show you how to upgrade the bookshelf app to v3 of react-query.
    Simply React (
    May 11, 2020
    There are patterns that have emerged in React that allow you to promote code reuse without sacrificing the simplicity or flexibility of the component. In this talk we'll go over several of these patterns that will make your React components and hooks more useful.
    Trying out react-virtual (replacing react-window) (
    May 08, 2020
    I'm currently using react-window for the "windowing" lesson, but Tanner Linsley released react-virtual and I want to give it a try.
    Working on Testing Library and Epic React (
    May 05, 2020
    Just thought I'd stream a bit of my work today for Testing Library and Epic React.
    Refactoring to react-query (
    Feb 18, 2020
    I'm refactoring some code to react-query.
      Requisite React (
      Apr 24, 2019
      In this talk, we'll get more effective at using React Hooks, React Suspense, and JSX.
      Saving Form State in Local Storage with React (
      Mar 15, 2019
      I've got a contact form that I need to save to local storage so if people refresh the page and come back it's still around. Let's see how that goes!
      Using React.useReducer to avoid state bugs (
      Mar 14, 2019
      A while back I tweeted an issue I was having with a stopwatch component. I'm going to show you why it was happening and Dan's helpful solution to the problem using React.useReducer (and why React.useState wasn't well suited for this task).
      Building a contact form with Lambda Functions (
      Mar 14, 2019
      My contact form leaves some things to be desired with the workflow on my end so I'm going to make a serverless function for my contact form so it'll do what I want it to do.
      How to Test a Custom React Hook (that uses setTimeout) (
      Feb 27, 2019
      Someone asked me to test the hook we used yesterday.
      Accepting and cloning a react element as a prop (
      Feb 11, 2019
      This is a situation I faced while working on and thought you all would find it interesting!
      Let's HOOK up with React (
      Feb 06, 2019
      Going to be exploring a bunch of stuff about React hooks which was released today!
      Updating react-testing-library for React 16.8.0 (part 2) (
      Feb 06, 2019
      Hooks was released along with a special utility for testing React properly. I'm going to update react-testing-library to make it easier for people to test things properly.
      Updating react-testing-library for React 16.8.0 (
      Feb 05, 2019
      React has a new utility for testing and I'm going to update react-testing-library to use that utility.
      React Hooks: useImperativeHandle (
      Jan 22, 2019
      Honestly we're basically just going to play with the example in the docs.
      Random VSCode Workflow Tips (
      Jan 14, 2019
      Not that I'm much of a VSCode power user, but a lot of people ask me about this so I thought I'd show how I use VSCode.
      How to make Jest run anything (
      Jan 11, 2019
      This is to show how my custom jest-node-runner works.
      How NOT to test custom React hooks (and how to test them) (
      Jan 07, 2019
      It can be tempting to try and call your custom hook manually and test it that way, but you'll run into the error "Hooks can only be called inside the body of a function component." And for good reason. Let's talk about why that is and the proper way to test a custom React hook.
      React Component Organization Tips (
      Jan 04, 2019
      Someone asked me a question about destructuring custom `this` methods in the `render` method. I'm going to answer their question in addition to talk about why I don't like using methods like that at all.
      Add Cypress to a gatsby app (
      Dec 20, 2018
      I've got a little gatsby app, let's see how we can add Cypress to test it!
      Test components that use React.lazy + Suspense (
      Dec 12, 2018
      This was something I bumped into yesterday and thought I'd share how I test it.
      Create a custom useLocalStorage React hook (
      Dec 10, 2018
      Let's just make a quick little useLocalStorage hook
      React Hooks: Refactoring a render-prop-based component to use hooks! (
      Nov 26, 2018
      Going to be refactoring react-toggled to export a new fancy useToggle hook.
      Nested Suspense Issues (
      Nov 20, 2018
      It appears that the top level Suspense maxDuration is being applied while the nested fallback is taking place.
      Why React Hooks (
      Nov 18, 2018
      Simplify and speed up your app with React Hooks.
      Improve a11y and usability of an icon component (
      Nov 16, 2018
      Someone wanted my feedback on an icon component. Here it is!
      Effective unit testing (
      Nov 15, 2018
      True units are awesome to test!
      Use jest's expect module without jest (
      Nov 14, 2018
      James Long tweeted about how you can do this and I thought it'd be cool to share :)
      React Hooks & testing: Stepping through React code (
      Nov 05, 2018
      I'm trying to figure out the best way to simplify testing of React components with react-testing-library.
      Test Driven Development: When it works and when it doesn't (
      Oct 24, 2018
      Testing code before its written has some great advantages, but it's not a perfect solution for every scenario. Let's explore some of these situations.
      Testing Q&A: You ask, I answer. Part 2! (
      Oct 23, 2018
      You have more questions. View live and ask in the chat and I'll get through as many as I can!
      Demystifying Testing (
      Oct 18, 2018
      I got some feedback that there’s confusion around what all of these names and terms are. Let's go over them!
      Testing Q&A: You ask, I answer. (
      Oct 17, 2018
      This is wide open! For ~15 minutes I'm all ears! Let's talk testing!
      Releasing downshift 3.0.0 (
      Oct 08, 2018
      I'm going to actually do the release during this livestream! WOOO!
      What's coming in downshift 3.0.0 (
      Oct 06, 2018
      I'm working on cleaning up a few things and making downshift 3.0.0!
      Using and writing custom babel macros with create-react-app v2 (
      Sep 27, 2018
      The last beta of create-react-app v2 has been published. Let's see how you can use babel-plugin-macros in a create-react-app app and how to write your own.
      React... Suspense... (
      Sep 26, 2018
      Livestream of my talk @ SLC frontend meetup
      Example of Classless Components with @reach/component-component (
      Sep 20, 2018
      I just built something neat last night and thought I'd share it with you :)
        Debug tests in create-react-app (
        Sep 18, 2018
        If you want to run your tests in create-react-app with the Chrome Debugger.
        Installing Gatsby (
        Sep 18, 2018
        I'm doing some research on gatsby. Let's see what it takes to get this installed and running from the perspective of a newcomer.
        Confident React (
        Sep 02, 2018
        We want to make sure that when we ship new code, our users can use the application. The best way we've found to do that is to write automated tests that run before we deploy a new version of the app. But if our tests aren't doing exactly what the user will do, then how do we really know that things will work when users interact with our apps?
        Testing React with Kent C. Dodds and Jack Franklin (
        Aug 28, 2018
        Test React components in complete isolation, in integration, or a mix of the two? Jack and Kent will discuss their differing opinions about Testing React applications and why they have come to their conclusions.
        Stepping through React's code for lifecycles and setState (
        Aug 23, 2018
        Let's pop open the debugger and see what React is doing when it calls our lifecycle methods and when we call setState.
        Create a "from-html-testing-library" using dom-testing-library (
        Aug 20, 2018
        There's an interesting new library called "from-html". Let's see what it'd be like to create a from-html-testing-library :)
        Debug React's Event System (
        Aug 10, 2018
        In my efforts to understand React's event system and how it relates to real browser events (so I can fire real browser events to call event handlers), I learned a few things you may find interesting :)
        Simply React (
        Aug 09, 2018
        One of the things I love about React is how easy it is to encapsulate UI code into a component. I love this because it makes reuse of those components easy. But is it simple? I've made my fair share of components that had to accept a bunch of props to handle a growing list of different use cases resulting in a complex render function full of conditional statements and a confusing API for people using this "reusable" component.
        Debug Jest Tests (
        Aug 09, 2018
        Sometimes it's just really nice to step through your code line-by-line. Here we'll cover how you can run your jest tests in Chrome's DevTools using node --inspect-brk.
        Test React Portals (
        Aug 07, 2018
        How to Test React components that use React.createPortals
        What is MDX (
        Aug 06, 2018
        I've recently taking a big liking to MDX: A JSX in Markdown loader, parser, and renderer for ambitious projects. It combines the readability of Markdown with the expressivity of JSX. The best of both worlds.
        Simply React (
        Jul 28, 2018
        One of the things I love about React is how easy it is to encapsulate UI code into a component. I love this because it makes reuse of those components easy. But is it simple? I've made my fair share of components that had to accept a bunch of props to handle a growing list of different use cases resulting in a complex render function full of conditional statements and a confusing API for people using this "reusable" component.
          Make a stateful react component without a class (
          Jul 25, 2018
          This is a demo of Ryan Florence's brilliant @reactions/component
            How to test Redux (
            Jul 18, 2018
            Do you test actions, reducers, selectors, and components in isolation as unit tests? Or do you test the connected components with the actual store wired up as integration tests? Here are my thoughts.
            Implementing Control Props in custom React Components (
            Jul 12, 2018
            This is a livestream of part of my Advanced React Component Patterns in Portland at ChainReactConf 2018.
            Avoid setState warnings on unmounted React components (
            Jul 05, 2018
            If you're doing any async stuff in your React component and the callback calls this.setState, you need to either cancel the async stuff or take care to not call setState if the component is unmounted.
            Intro to ReasonML Syntax from a JavaScript perspective (
            Jul 03, 2018
            I'm a total ReasonML noob, but I'm interested in learning. So here's me, learning :)
            Use React with an index.html and script tags (
            Jun 29, 2018
            Getting started with React doesn't have to be complicated. Let's get up and running with React using nothing but an index.html file and our web browser!
            Component Unit Testing (and mocking) with react-testing-library (
            Jun 22, 2018
            Lots of people make the assumption that react-testing-library is good for React component integration testing, but not very useful for unit testing because it (intentionally) doesn't support shallow rendering. Let's see how you can do unit testing with react-testing-library
            Make jest run anything (
            Jun 20, 2018
            Jest is more than a testing framework. It's a platform. And you can make it run just about anything for you.
            render React Components with react-testing-library (
            Jun 19, 2018
            Now there's only one way to do it, but it can be customized to suite your needs.
            Creating an autocomplete component with downshift (
            Jun 13, 2018
            Just going to build an autocomplete component with downshift for funzies.
            Simply React - OpenWest 2018 (
            Jun 08, 2018
            There are patterns that have emerged in React that allow you to promote code reuse without sacrificing the simplicity or flexibility of the component. In this talk we’ll go over 5 of these patterns that will make your React components more useful.
            Use React Portals to build a Modal (
            Jun 01, 2018
            Learn how to build a modal with React Portal.
            Enable dynamic Hot Module Replacement with Webpack (
            May 24, 2018
            This is an example of how you can implement hot module replacement with require.context.
            Test Driven Development with react-testing-library (
            May 22, 2018
            The react-testing-library is a very light-weight solution for testing React components.
            Use React DevTools (
            May 14, 2018
            This is a quick intro to react devtools.
            Advanced React Component Patterns workshop @ PayPal (Part 2) (
            May 12, 2018
            Making React components that can be used in multiple places is not hard. What is hard is when the use cases differ. Without the right patterns, you can find yourself with a highly complex component that requires a lot of configuration props and way too many if statements. With this course, you'll not only learn great patterns you can use, but also the strengths and weaknesses of each so you know which to reach for to provide your components the flexibility and power you need.
            Confident React (
            May 10, 2018
            Let's rethink what it means to ship applications with confidence and what it takes to get there. With improved tools and practices, we can be more certain that what we're shipping to our users will work the way it's intended.
            5 Patterns to make your React Components more useful (
            Apr 11, 2018
            This is a livestream/recording of a (remote) talk by me at Phoenix ReactJS.
            Converting a component to a render prop (
            Mar 26, 2018
            I have a component that needs to have three visual difference implementations, so I decided to make it a render prop component.
            Testing Practices and Principles Workshop - Assert.js Conf (
            Mar 22, 2018
            This is a recording from my laptop at the Assert.js conference workshop.
            Write tests. Not too many. Mostly integration. Talk Practice at UtahJS (
            Jan 05, 2018
            Automated tests are an important part of raising your confidence when releasing software. They can speed you up or slow you down depending on how you write them and which form of testing you focus your test writing on. In this talk, we’ll cover the value of automated testing and where your efforts should be focused to strike the best balance of confidence and effort.
            Use state in React (
            Oct 18, 2017
            We're going to build this stopwatch component. We'll start by hacking away at rerendering our whole app and passing props to it, then we'll migrate that mess to React state to make it clean and isolated.
            downshift: integrating geniejs with downshift (
            Aug 10, 2017
            I built geniejs as a side project over 3 years ago and I wanted to see what it would be like to integrate the smarts of geniejs with the experience of downshift. I was not disappointed!
            downshift: Downshift work build, preact support, and simplification (
            Aug 08, 2017
            Here I work on the rollup build, add support for preact out of the box, and simplify the API a bit.
            downshift: fixing regressions and more testing (
            Aug 08, 2017
            Got some great feedback and fixed some regressions, then added more tests.
            downshift: getting to 100% code coverage! (
            Aug 08, 2017
            This is the last bit of testing I needed to do to get to 100% automated code coverage!
            downshift: refactor, simplify, and test! (
            Aug 08, 2017
            I'm finally solidifying things and got a bunch of tests written.
            downshift: testing utils (
            Aug 08, 2017
            In this one I write tests for pure functions as well as mocking out DOM APIs. It's pretty wild.
            downshift: Making controllable with state props (
            Aug 07, 2017
            This feature is one of the things that gives you ultimate control with downshift. It allows you to control and be notified of any internal state changes. I think it's pretty legit!
            downshift: Making Downshift more accessible (
            Aug 07, 2017
            Here I work on some feedback I got from Marcy Sutton on the accessibility of downshift.
            downshift: Implementing a React Autocomplete Component for PayPal with downshift (
            Aug 02, 2017
            I actually spend way more time just styling it than using the downshift APIs, but I think that's kinda the point. The downshift APIs are tiny. Enjoy!
            Maintainable CSS in React (
            Jul 20, 2017
            This is a recording of my screen during my talk at the internal conference JS@PayPal on July 20th 2017. I talk about CSS in JS and how it can help us with css in applications.
            Concerning CSS in JS (
            May 23, 2017
            I no longer care about: specificity, CSS linters, CSS preprocessors, vendor prefixing, removing unused CSS, finding CSS dependencies and dependents. I now care more about: whether it’s fast enough, whether it’s small enough, whether it’s familiar enough. These are some of my trade-offs. Because I use CSS-in-JS.
            JavaScript & React Testing with Jest (
            Sep 08, 2016
            Jest has become one of the coolest things in testing JavaScript and React. In recent months, the Jest team has made huge strides with the testing framework and it's a pretty amazing tool.
            React events in depth w/ Kent C. Dodds, Ben Alpert, & Dan Abramov (
            Sep 01, 2016
            Based on a recent pull request in the React repo ( it was suggested that we chat about how events in React work. Ben and Dan were eager to have this conversation with me :)

            Articles & Tutorials

            Why you shouldn't put refs in a dependency array (
            May 21, 2021
            If you use a ref in your effect callback, shouldn't it be included in the dependencies? Why refs are a special exception to the rule!
            Super Simple Start to Remix (
            May 05, 2021
            The simplest distraction-free version of a remix app.
              How to write a React Component in TypeScript (
              Mar 04, 2021
              There are plenty of ways to do it, here's how I recommend typing React Components.
              Wrapping React.useState with TypeScript (
              Jan 22, 2021
              How to make a custom hook that wraps useState with TypeScript properly.
              How to Test React.useEffect (
              Dec 04, 2020
              So, you've got some code in React.useEffect and you want to know how to test it. This is a pretty common question. The answer is kinda anti-climatic and general.
              How React Uses Closures to Avoid Bugs (
              Nov 27, 2020
              When the world moved from React class components and lifecycle methods to React function components and hooks, we left behind a bug that many of us didn't even know was plaguing our class-based codebases.
                Importing React Through the Ages (
                Nov 20, 2020
                How and why I import react using a namespace (import * as React from 'react').
                Use CSS Variables instead of React Context (
                Nov 13, 2020
                I've been riding the CSS-in-JS train for years (I was even a significant contributor to the "movement"). It's awesome. I've never been so productive working with CSS than when I added a real programming language to it.
                Memoization and React (
                Nov 06, 2020
                A basic introduction memoization and how React memoization features work.
                Stop Stumbling Around in React Learning Darkness (
                Sep 28, 2020
                Learning can be a lot like stumbling around in the darkness. Except not only is there no illumination to guide you, you're also in someone else's house and their kids are less clean than yours and their dogs are darker and less forgiving than yours.
                One React mistake that's slowing you down (
                Sep 25, 2020
                One thing that I like about React is that it allows me to write my components like little black boxes of abstraction. I can look at a design and draw lines around the UI elements and I know the components that I'm going to be making.
                Myths about useEffect (
                Sep 24, 2020
                I've taught React to tens of thousands of developers. Before and after hooks were released. One thing I've observed is people tend to struggle with the useEffect hook and there are some common hang-ups for them that I'd like to address here.
                Render as you fetch (with and without suspense) (
                Sep 21, 2020
                React Suspense for Data Fetching is an experimental feature in React that opens the doors to a lot of really awesome performance improvements as well as developer experience improvements thanks to the declarative APIs given around asynchrony.
                My State Management Mistake (
                Sep 17, 2020
                When I started at PayPal, the app I started with used Redux for its state management (like pretty much every other React app at the time). This was the first React product I'd ever worked on and I was excited to use the latest and greatest tools for state management.
                Why you've been bad about Profiling React Apps (
                Sep 14, 2020
                When was the last time you tried your app out on the kinds of devices your end users are using? If you haven't, have you at least tried to simulate the kind of performance characteristics of your users on low-end devices?
                Requisite React (
                Sep 11, 2020
                When was the last time you saw an error and had no idea what it meant (and therefore no idea what to do about it)? Today? Yeah, you're not alone... Let's talk about how to fix that.
                Avoid soul-crushing components (
                Sep 08, 2020
                React components afford us the opportunity to encapsulate state, logic, and markup in a single place. A component is like a magical machine where you pass in props and a beautiful component pops out the other end.
                Why I Love React (
                Aug 31, 2020
                I still remember when I first heard about React. It was January 2014. I was listening to a podcast. Pete Hunt and Jordan Walke were on talking about this framework they created at Facebook with no support for two way data-binding, no built-in HTTP library, no dependency injection, and in place of templates it had this weird XML-like syntax for the UI.
                  Use ternaries rather than && in JSX (
                  Jul 28, 2020
                  What problems can happen when you use && to conditionally render content in JSX
                  Use react-error-boundary to handle errors in React (
                  Jul 20, 2020
                  How to simplify your React apps by handling React errors effectively with react-error-boundary
                  Stop mocking fetch (
                  Jun 08, 2020
                  Why you shouldn't mock fetch or your API Client in your tests and what to do instead.
                  Tracing user interactions with React (
                  May 07, 2020
                  How to use the (EXPERIMENTAL) interactions tracing API in React.
                  Common mistakes with React Testing Library (
                  May 05, 2020
                  Some mistakes I frequently see people making with React Testing Library.
                  Super Simple Start to React (
                  Apr 28, 2020
                  The most simple React setup imaginable.
                  Stop using client-side route redirects (
                  Apr 13, 2020
                  Why you should stop using client-side route redirects (like the from prop on React Router's Redirect component) and what you should do instead.
                  How to test custom React hooks (
                  Mar 24, 2020
                  Get confidence your custom React hooks work properly with solid tests.
                  React Production Performance Monitoring (
                  Mar 17, 2020
                  How to set up performance monitoring for production React applications.
                  Stop using isLoading booleans (
                  Feb 27, 2020
                  Why using a status enum (or even better: a state machine) will help your app stay bug free.
                  Make your own DevTools (
                  Feb 17, 2020
                  How creating DevTools specific for your own app can improve your productivity.
                  Fix the "not wrapped in act(...)" warning (
                  Feb 03, 2020
                  There are a few reasons you're getting this warning. Here's how you fix it.
                  Don't call a React function component (
                  Dec 09, 2019
                  The difference between React.createElement and calling a function component directly.
                  Inversion of Control (
                  Nov 19, 2019
                  A simple principle that can drastically improve your reusable code
                  Understanding React's key prop (
                  Nov 12, 2019
                  The key prop is a mechanism for controlling component instances.
                  How to Enable React Concurrent Mode (
                  Nov 05, 2019
                  Concurrent Mode is an enormous improvement for performance. Here's how you enable it.
                  How to add testing to an existing project (
                  Oct 29, 2019
                  This is how you get started in testing your application.
                  Making your UI tests resilient to change (
                  Oct 07, 2019
                  User interface tests are famously finicky and prone to breakage. Let's talk about how to improve this.
                  Don't Sync State. Derive It! (
                  Oct 01, 2019
                  How to avoid state synchronization bugs and complexity with derived state.
                  State Colocation will make your React app faster (
                  Sep 24, 2019
                  How state colocation makes your app not only more maintainable but also faster.
                  Profile a React App for Performance (
                  Sep 16, 2019
                  How to use the React DevTools and React's profiling build to properly profile a production app.
                  How to implement useState with useReducer (
                  Aug 31, 2019
                  A fun exercise to help understand the differences and use cases of these two related hooks.
                  Write fewer, longer tests (
                  Aug 27, 2019
                  Making tests too short often leads to poor testing practices and way more tests.
                  JavaScript to Know for React (
                  Aug 20, 2019
                  What JavaScript features you should be familiar with when learning and using React.
                  5 Tips to Help You Avoid React Hooks Pitfalls (
                  Aug 05, 2019
                  Let's explore some hook gotchas and how to avoid them.
                  Avoid Nesting when you're Testing (
                  Jul 30, 2019
                  Why using hooks like beforeEach as a mechanism for code reuse leads to unmaintainable tests and how to avoid it.
                  Write tests. Not too many. Mostly integration. (
                  Jul 17, 2019
                  Guillermo Rauch tweeted this a while back. Let's take a dive into what it means.
                  React Fundamentals: Props vs State (
                  Jul 08, 2019
                  What's the difference between props and state in React?
                  One simple trick to optimize React re-renders (
                  Jun 24, 2019
                  Without using React.memo, PureComponent, or shouldComponentUpdate.
                  When to useMemo and useCallback (
                  Jun 04, 2019
                  Performance optimizations ALWAYS come with a cost but do NOT always come with a benefit. Let's talk about the costs and benefits of useMemo and useCallback.
                  Avoid the Test User (
                  May 24, 2019
                  How your UI code has only two users, but the wrong tests can add a third.
                  Authentication in React Applications (
                  May 20, 2019
                  How to handle user authentication in modern React Applications with context and hooks.
                  How to optimize your context value (
                  May 06, 2019
                  Why and how you can optimize your context provider's value to avoid performance issues.
                  Always useMemo your context value (
                  May 06, 2019
                  Why and how you should always use React's useMemo hook for your context provider value prop.
                  How to use React Context effectively (
                  Apr 29, 2019
                  How to create and expose React Context providers and consumers.
                  Application State Management with React (
                  Apr 22, 2019
                  How React is all you need to manage your application state.
                  How to know what to test (
                  Apr 13, 2019
                  Practical advice to help you determine what to test.
                  AHA Testing (
                  Apr 07, 2019
                  How to apply the "Avoid Hasty Abstraction" principle to your test code.
                  The State Reducer Pattern with React Hooks (
                  Mar 25, 2019
                  A pattern for you to use in custom hooks to enhance the power and flexibility of your hooks.
                  How to Enable React Strict Mode (
                  Mar 04, 2019
                  What it is and how to add it to your app.
                  React Hooks: Compound Components (
                  Feb 18, 2019
                  How do compound components change with React hooks? A few weeks ago I did a DevTips with Kent livestream where I show you how to refactor the compound components pattern from a class component to a function component with React hooks.
                  Should I useState or useReducer? (
                  Feb 11, 2019
                  Two built-in React hooks that handle state, which one should you use? Whenever there are two things to do the same thing, people inevitably ask: "When do I use one over the other?"
                  Please stop building inaccessible forms (and how to fix them) (
                  Feb 04, 2019
                  I regularly find inaccessible forms. In this post we’ll check out one of the common accessibility problems and fix it.
                  paypal-scripts now supports TypeScript as well as JavaScript (
                  Jan 21, 2019
                  What happened that made TypeScript viable for me and worth migrating paypal-scripts for.
                  React Hooks: What’s going to happen to my tests? (
                  Dec 24, 2018
                  How can we prepare our tests for React’s new hooks feature?
                  React/JSX as a server-side templating language (
                  Oct 01, 2018
                  Using React function components to render your website’s skeleton index.html
                  Why I Never Use Shallow Rendering (
                  Jul 23, 2018
                  Tests should help me be confident that my application is working and there are better ways to do that than shallow rendering.
                  When to break up a component into multiple components (
                  Jul 16, 2018
                  At what point does it make sense to break a single component into multiple components?
                  What is JSX? (
                  Jul 09, 2018
                  You may use it every day, but have you seen what happens after Babel transpiles it?
                  Test Isolation with React (
                  Jul 02, 2018
                  Why your tests should be completely isolated from one another and how to do that.
                  downshift 2.0.0 released (
                  Jun 15, 2018
                  Even better accessibility, React Native and ReasonReact support, even simpler API, improved docs, new examples site, Flow and TypeScript support, and a new online community.
                  When to use Control Props or State Reducers (
                  Jun 11, 2018
                  Comparing two similar patterns that enable many of the same use cases.
                  Prop Drilling (
                  May 21, 2018
                  What it is, why it’s good, why it’s bad, and how to avoid common problems with it.
                  Mixing Component Patterns (
                  May 07, 2018
                  Let’s make a component that supports Render Props, Component Injection, Compound Components, the Provider Pattern, and Higher Order Components!
                  Migrating to React’s New Context API (
                  Apr 23, 2018
                  Let’s compare the before/after of React’s new context API.
                  How to React (
                  Apr 16, 2018
                  Let’s see how learning React in the right order can make it less overwhelming.
                  Compose Render Props (
                  Apr 09, 2018
                  One of the reasons I’m so excited about render props.
                  Introducing the react-testing-library (
                  Apr 02, 2018
                  A simpler replacement for enzyme that encourages good testing practices.
                  When to NOT use Render Props (
                  Mar 26, 2018
                  Let’s back up from the hype and think critically about the render props pattern.
                  Application State Management (
                  Feb 26, 2018
                  Some approaches to solving one of the most complex problems in software.
                  The state reducer pattern (
                  Feb 19, 2018
                  A new pattern has been implemented in downshift and it’s awesome. Use the state reducer pattern to make your components more useful.
                  React’s new Context API (
                  Feb 07, 2018
                  It’s way more ergonomic, it’s no longer “experimental,” and it’s now a first-class API!
                  Answers to common questions about render props (
                  Jan 12, 2018
                  Because there’s a ton of hype, and a bunch of questions.
                  Testing components using render props (
                  Jan 08, 2018
                  Let’s look at how we can write tests for React components that use render props!
                  Write tests. Not too many. Mostly integration. (
                  Oct 16, 2017
                  Guillermo Rauch tweeted this a while back. Let’s take a quick dive into what it means.
                  Introducing downshift for React (
                  Aug 23, 2017
                  downshift is the primitive you need to build simple, flexible, WAI-ARIA compliant React autocomplete/typeahead/dropdown/select/combobox/etc (AKA “item selection”) (p)react components.

                  Podcast Episodes

                  Kent C. Dodds on Epic React (
                  Oct 01, 2020
                  Kent C. Dodds spills the tea on his latest course, workshop, masterclass, creation Epic React.
                  Michael Chan Encapsulates State (
                  May 19, 2020
                  Michael Chan talks about co-location, encapsulation, and CSS grid.
                  Tanner Linsley Separates UI State And Server State (
                  May 19, 2020
                  Tanner Linsley talks about creating libraries and separating UI state and server state.
                  Realigning Your Model of React After Hooks (
                  Aug 08, 2019
                  Dan Abramov discusses how the addition of hooks changed how we write React.
                  Develop Your Career with Kent C. Dodds (
                  May 09, 2019
                  Chantastic asks about the approach Kent took while developing his career PayPal, what he had to give up to stay focused, and what's changed now that he's independent.
                  Delete Your Components with Kent C. Dodds (
                  Sep 18, 2018
                  Chantastic talks with Kent C. Dodds about his adventures in React development and why we should be optimizing code for delete-ability. They discuss React Rally, managing your career, taming your ego, keeping healthy and happy on Twitter, tools for composing components well and when to use them, and what’s next for React.
                  Breaking up with Higher Order Components with David Atchley (
                  Apr 17, 2018
                  In this episode of React Round Up, the panel discuss breaking up with higher-order components with David Atchley. They talk about what higher-order components and render props are and when you would want to use them to help you in your code. They also touch on overuse and misuse of applications and coding tools and the difference between using render props and HOCs.
                  Setting Up and Getting Used to Gatsby with Aman Mittal (
                  Apr 10, 2018
                  In this episode of React Round Up, the panel discuss setting up and getting used to Gatsby with Aman Mittal. Aman is a computer science graduate, has been working in web development for the past two years, and has worked with companies such as freeCodeCamp. He has been working with React for the past 6 months and started working with Gatsby in January of 2018. They talk about what Gatsby is, why you would want to use it, and what a simple Gatsby site would look like.
                  RRU 004: Redux-Bundler with Henrik Joreteg (
                  Mar 27, 2018
                  In this episode of React Round Up, the panel discusses redux-bundler with Henrik Joreteg. They talk about his redux-bundler on GitHub and the ability to make changes behind the scenes without having to bother the user. He gives a general background on why he created the bundler and how you can use it in your programming to make your life easier.
                  Advanced Component Patterns and Downshift with Kent C. Dodds (
                  Mar 20, 2018
                  In this episode of React Round Up, the panel discusses advanced component patterns and Downshift. They talk about different component patterns, especially render prop patters, and the fact that Downshift allows for your components to be much more useful generally for more people. They also note that the render prop patterns can help to separate logic from view, which makes things easier to develop.
                  Getting Started with React (
                  Mar 06, 2018
                  In this episode of React Round-Up, the panel discusses how they each got into React and they provide some great resources for people who want to learn more about React and what it’s all about. They emphasize the fact that React is a very straightforward language and can be used relatively painlessly with a little bit of learning before jumping in.
                  Learning React with Kent C. Dodds (
                  Dec 29, 2017
                  Kent C. Dodds, a leading React expert, speaks with John Lindquist and Joel Hooks, the co-founders of egghead, about how React is a fantastic technology to learn for both newcomers to programming and Javascript grey-beards alike.
                  Kent C. Dodds - Building Reusable React Components with Render Props (
                  Dec 21, 2017
                  In this episode, Adam talks to Kent C. Dodds about building downshift, a React autocomplete component he designed for experiences he needed to build at PayPal. Kent gives a behind-the-scenes look at how the library uses the render prop pattern to allow maximum customizability without complex configuration.

                  Courses & Video Series

                  Epic React (
                  Sep 29, 2020
                  Confidently ship well-architected production ready React apps like a pro.
                  The Beginner's Guide to React (
                  Mar 28, 2020
                  This course is for React newbies and those looking to get a better understanding of React fundamentals.
                  Use Suspense to Simplify Your Async UI (
                  Dec 05, 2019
                  In this workshop, you'll learn how Suspense works under the hood, preparing you for the future of asynchronous state management.
                  One Day Introduction to React with Kent C. Dodds (
                  Feb 24, 2019
                  This course is ideal for those looking to get a better understanding of React fundamentals. In just a matter of hours, you'll complete this workshop knowing what problems React can solve for you and how it goes about solving them. You'll work right alongside React expert Kent C. Dodds as he guides you through using JSX to code through real-world exercises and on to knowledge that will make you more productive at building apps with React.
                  Simplify React Apps with React Hooks (
                  Dec 03, 2018
                  In this course, Kent will take a modern React codebase that uses classes and refactor the entire thing to use function components as much as possible.
                  Advanced React Component Patterns (
                  Jun 01, 2018
                  The goal of this course is to give you the knowledge of advanced patterns you can use to make React components that are more flexible, simpler, and more fun to build, use, and maintain.
                  Testing React Applications, v2 (
                  May 13, 2018
                  Learn to catch errors before they reach the end user with automated tests!
                  Advanced React Component Patterns Workshop @ PayPal (
                  May 11, 2018
                  With this course, you'll not only learn great patterns you can use, but also the strengths and weaknesses of each so you know which to reach for to provide your components the flexibility and power you need.
                  Advanced React Patterns (
                  May 02, 2018
                  In this course, Kent C. Dodds shows how to separate component logic, state and display properties to make your components more flexible and usable across large React applications.
                  Testing JavaScript Applications (feat. React and Redux) (
                  Jun 20, 2017
                  Create automated testing so you can be sure you’re maintaining the highest quality JavaScript applications possible!


                  downshift (
                  Aug 09, 2019
                  🏎 Primitive to build simple, flexible, WAI-ARIA compliant enhanced input React components
                  react-testing-library (
                  May 31, 2019
                  🐐 Simple and complete React DOM testing utilities that encourage good testing practices
                  dom-testing-library (
                  May 30, 2019
                  Simple and complete DOM testing utilities that encourage good testing practices.