Kent C. Dodds

Discover React patterns that allow you to promote code reuse without sacrificing the simplicity or flexibility of a component.

One of the things I love about React is how easy it is to encapsulate UI code into a component or hook. I love this because it makes reuse of those things easy. But is it easy? 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. 

Eventually it becomes too much and I had to make a new version of the same component to handle slightly different use cases. Lots of code/bug duplication there because my reusable component wasn't reusable enough.

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.

2020

Byteconf React

Simply React

The hooks honeymoon phase is over. We were able to overlook our confusion as a reasonable familiarity issue, but now it’s time to get real about the pitfalls of React Hooks. 

Hooks lead to a better user experience and fewer bugs for sure, but without the right foundational understanding of them and certain JavaScript semantics, we’ll probably cause other problems in the process of using hooks.

In this talk, we’ll explore some of the gotchas of using hooks, why those things are problems, and how to think about hooks so we develop an intuition for how to use hooks while avoiding the pitfalls.

2019

React Rally

React Hook Pitfalls

Kent talks about how important it is to understand the abstractions that we use (Hooks, Suspense, JSX, etc), if we want to level up our abilities, speed and skills. 

React is a brilliant JavaScript library for building simple and complex user interfaces. 

In our eagerness to apply React to our most complex of problems and ship solutions today, we can get lost in the 🌲🌲🌲 forest of abstractions 🌲🌲🌲. 

When it comes to leveling up our skills in anything, I find the most effective method is to take a step back and understand the foundational fundamentals. 

To strip away all abstraction until what we're left with is the bare bones. The better you understand an abstraction, the more effective you will be at using it. 

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

React Amsterdam

Requisite React

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?

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.

2018

Confident React

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. 

Eventually it becomes too much and I had to make a new version of the same component to handle slightly different use cases. Lots of code/bug duplication there because my reusable component wasn't reusable enough. It wasn't simple enough.

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 cover some of these patterns that will make your React components more useful.