Simply React ⚛️

Component patterns to simplify your reusable components...

Kent C. Dodds

Utah

wife, 4 kids, & a dog

PayPal, Inc.

Please Stand...

if you are able ❤️ ♿️

What this talk is

  • Typical component lifecycle example
    (not what you're thinking)
  • How patterns can simplify
  • Composability
  • A challenge

What this talk is not

  • How to implement patterns

Learn React 🆓

Level up in React

Let's
Get
STARTED!

bundle size/perf

API complexity

implementation complexity 🐛

maintenance overhead

A word of caution...

What if this is all you will ever need?

Don't solve problems you won't have

Use Patterns that simplify your API

render props

state reducers

control props

providers

compound components

Let's (re)discover more!

Thank you!

Simply React

By Kent C. Dodds

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

  • 13,067