Kent C. Dodds

Just thought I'd stream a bit of my work today for Testing Library and Epic React.

I'm refactoring some code to react-query.

Build a ReactJS App workshop.

In this talk, we'll get more effective at using React Hooks, React Suspense, and JSX.

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!

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).

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.

Someone asked me to test the hook we used yesterday.

This is a situation I faced while working on kentcdodds.com and thought you all would find it interesting!

Going to be exploring a bunch of stuff about React hooks which was released today!

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.

React has a new utility for testing and I'm going to update react-testing-library to use that utility.

Honestly we're basically just going to play with the example in the docs.

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.

This is to show how my custom jest-node-runner works.

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.

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.

I've got a little gatsby app, let's see how we can add Cypress to test it!

This was something I bumped into yesterday and thought I'd share how I test it.

Let's just make a quick little useLocalStorage hook

Going to be refactoring react-toggled to export a new fancy useToggle hook.

It appears that the top level Suspense maxDuration is being applied while the nested fallback is taking place.

Simplify and speed up your app with React Hooks.

Someone wanted my feedback on an icon component. Here it is!

True units are awesome to test!

James Long tweeted about how you can do this and I thought it'd be cool to share :)

Let's see if I can get this to work!

I'm trying to figure out the best way to simplify testing of React components with react-testing-library.

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.

You have more questions. View live and ask in the chat and I'll get through as many as I can!

I got some feedback that there’s confusion around what all of these names and terms are. Let's go over them!

This is wide open! For ~15 minutes I'm all ears! Let's talk testing!

I'm going to actually do the release during this livestream! WOOO!

I'm working on cleaning up a few things and making downshift 3.0.0!

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.

Livestream of my talk @ SLC frontend meetup

I just built something neat last night and thought I'd share it with you :)

If you want to run your tests in create-react-app with the Chrome Debugger.

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.

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?

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.

Let's pop open the debugger and see what React is doing when it calls our lifecycle methods and when we call setState.

There's an interesting new library called "from-html". Let's see what it'd be like to create a from-html-testing-library :)

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 :)

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.

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.

How to Test React components that use React.createPortals

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.

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.

This is a demo of Ryan Florence's brilliant @reactions/component

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.

This is a livestream of part of my Advanced React Component Patterns in Portland at ChainReactConf 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.

I'm a total ReasonML noob, but I'm interested in learning. So here's me, learning :)

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!

How to setup react-testing-library to work with create-react-app

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

Jest is more than a testing framework. It's a platform. And you can make it run just about anything for you.

Now there's only one way to do it, but it can be customized to suite your needs.

Just going to build an autocomplete component with downshift for funzies.

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.

Learn how to build a modal with React Portal.

Let's explore component composition

This is an example of how you can implement hot module replacement with require.context.

The react-testing-library is a very light-weight solution for testing React components.

This is a quick intro to react devtools.

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.

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.

This is a livestream/recording of a (remote) talk by me at Phoenix ReactJS.

I have a component that needs to have three visual difference implementations, so I decided to make it a render prop component.

This is a recording from my laptop at the Assert.js conference workshop.

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.

This is a recording of a meetup talk I gave at UtahJS

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.

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!

Here I work on the rollup build, add support for preact out of the box, and simplify the API a bit.

Got some great feedback and fixed some regressions, then added more tests.

This is the last bit of testing I needed to do to get to 100% automated code coverage!

I'm finally solidifying things and got a bunch of tests written.

In this one I write tests for pure functions as well as mocking out DOM APIs. It's pretty wild.

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!

Here I work on some feedback I got from Marcy Sutton on the accessibility of downshift.

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!

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.

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.

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.

Based on a recent pull request in the React repo (https://github.com/facebook/react/pull/7616) it was suggested that we chat about how events in React work. Ben and Dan were eager to have this conversation with me :)

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.

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.

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.

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.

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?

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.

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.

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.

What problems can happen when you use && to conditionally render content in JSX

How to simplify your React apps by handling React errors effectively with react-error-boundary

Why you shouldn't mock fetch or your API Client in your tests and what to do instead.

How to use the (EXPERIMENTAL) interactions tracing API in React.

Some mistakes I frequently see people making with React Testing Library.

The most simple React setup imaginable.

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.

Get confidence your custom React hooks work properly with solid tests.

How to set up performance monitoring for production React applications.

Why using a status enum (or even better: a state machine) will help your app stay bug free.

How creating DevTools specific for your own app can improve your productivity.

There are a few reasons you're getting this warning. Here's how you fix it.

The difference between React.createElement and calling a function component directly.

A simple principle that can drastically improve your reusable code

The key prop is a mechanism for controlling component instances.

Concurrent Mode is an enormous improvement for performance. Here's how you enable it.

This is how you get started in testing your application.

User interface tests are famously finicky and prone to breakage. Let's talk about how to improve this.

How to avoid state synchronization bugs and complexity with derived state.

How state colocation makes your app not only more maintainable but also faster.

How to use the React DevTools and React's profiling build to properly profile a production app.

How to start optimizing your React app renders

A fun exercise to help understand the differences and use cases of these two related hooks.

Making tests too short often leads to poor testing practices and way more tests.

What JavaScript features you should be familiar with when learning and using React.

Let's explore some hook gotchas and how to avoid them.

Why using hooks like beforeEach as a mechanism for code reuse leads to unmaintainable tests and how to avoid it.

Guillermo Rauch tweeted this a while back. Let's take a dive into what it means.

What's the difference between props and state in React?

Without using React.memo, PureComponent, or shouldComponentUpdate.

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.

How your UI code has only two users, but the wrong tests can add a third.

How to handle user authentication in modern React Applications with context and hooks.

Why and how you can optimize your context provider's value to avoid performance issues.

Why and how you should always use React's useMemo hook for your context provider value prop.

How to create and expose React Context providers and consumers.

How React is all you need to manage your application state.

Practical advice to help you determine what to test.

How to apply the "Avoid Hasty Abstraction" principle to your test code.

A pattern for you to use in custom hooks to enhance the power and flexibility of your hooks.

What it is and how to add it to your app.

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.

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?"

I regularly find inaccessible forms. In this post we’ll check out one of the common accessibility problems and fix it.

What happened that made TypeScript viable for me and worth migrating paypal-scripts for.

How can we prepare our tests for React’s new hooks feature?

Using React function components to render your website’s skeleton index.html

Tests should help me be confident that my application is working and there are better ways to do that than shallow rendering.

At what point does it make sense to break a single component into multiple components?

You may use it every day, but have you seen what happens after Babel transpiles it?

Why your tests should be completely isolated from one another and how to do that.

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.

Comparing two similar patterns that enable many of the same use cases.

What it is, why it’s good, why it’s bad, and how to avoid common problems with it.

Let’s make a component that supports Render Props, Component Injection, Compound Components, the Provider Pattern, and Higher Order Components!

Let’s compare the before/after of React’s new context API.

Let’s see how learning React in the right order can make it less overwhelming.

One of the reasons I’m so excited about render props.

A simpler replacement for enzyme that encourages good testing practices.

Let’s back up from the hype and think critically about the render props pattern.

Some approaches to solving one of the most complex problems in software.

A new pattern has been implemented in downshift and it’s awesome. Use the state reducer pattern to make your components more useful.

It’s way more ergonomic, it’s no longer “experimental,” and it’s now a first-class API!

Because there’s a ton of hype, and a bunch of questions.

Let’s look at how we can write tests for React components that use render props!

Guillermo Rauch tweeted this a while back. Let’s take a quick dive into what it means.

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.

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.

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.

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.

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.

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.