This site runs best with JavaScript enabled.

Search Kent C. Dodds Blogposts

If you can't find what you're looking for with this, try using Google.

Why your team needs

javascript, testing
A letter you can copy/paste and send to your boss.

Inversion of Control

abstractions, react, javascript, state reducer, control props, react hooks, render props
A simple principle that can drastically improve your reusable code

Understanding React's key prop

react, key prop, javascript
The key prop is a mechanism for controlling component instances.

How to Enable React Concurrent Mode

react, Concurrent Mode, async react
Concurrent Mode is an enormous improvement for user experience and developer experience. Here's how you enable it.

How to add testing to an existing project

web, react, application, testing, javascript
This is how you get started in testing your application

Building the Open Source Community We Want

Let's be intentional about the open source community we want and work hard to build it.

Making your UI tests resilient to change

javascript, testing, Ui Testing, Unit Testing, Integration Testing
User interface tests are famously finicky and prone to breakage. Let's talk about how to improve this.

Speed up your App with Web Workers

react, performance, web workers
How to get started using web workers for practical use cases

Don't Sync State. Derive It!

react, state, react hooks, useState, useReducer, useMemo
How to avoid state synchronization bugs and complexity with derived state.

State Colocation will make your React app faster

colocation, react, state, Redux, mobx
How state colocation makes your app not only more maintainable but also faster.

Profile a React App for Performance

react, devtools, optimization, profile
How to use the React DevTools and React's profiling build to properly profile a production app

Fix the slow render before you fix the re-render

react, performance, javascript, renders, rerenders
How to start optimizing your React app renders

How to implement useState with useReducer

react hooks, javascript, composability
A fun exercise to help understand the differences and use cases of these two related hooks

Write fewer, longer tests

javascript, software, qa
Making tests too short often leads to poor testing practices and way more tests.

JavaScript to Know for React

react, javascript
What JavaScript features you should be familiar with when learning and using React

How to get experience as a software engineer

programming, debugging, senior software engineer
There's no shortcut to experience, but there are things you can do to increase the impact of your time.

5 Tips to Help You Avoid React Hooks Pitfalls

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

Avoid Nesting when you're Testing

testing, javascript, jest, mocha, jasmine, ava
Why using hooks like beforeEach as a mechanism for code reuse leads to unmaintainable tests and how to avoid it.

When to break up a component into multiple components

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

Write tests. Not too many. Mostly integration.

testing, Integration, Code, web development, Unit Testing
Guillermo Rauch tweeted this a while back. Let's take a dive into what it means.

React Fundamentals: Props vs State

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

How I Teach

teaching, learning
How I apply the science of learning to help students retain what I teach them, and how I learn.

One simple trick to optimize React re-renders

react, optimization, memoization, React.memo, re-renders, performance
Without using React.memo, PureComponent, or shouldComponentUpdate


javascript, react, Architecture, Code, Clean Code
Maintainability through colocation

When to useMemo and useCallback

javascript, memoization, react hooks, performance, inline functions, react
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.

What open source project should I contribute to?

open source, github, javascript
My silver bullet answer to this frequently posed question, and how to get started

Avoid the Test User

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

Authentication in React Applications

javascript, react, router, authentication
How to handle user authentication in modern React Applications with context and hooks

How to optimize your context value

javascript, react, useMemo, react hooks, react context
Why and how you can optimize your context provider's value to avoid performance issues

How to use React Context effectively

react, javascript
How to create and expose React Context providers and consumers

Application State Management with React

react, javascript, redux, mobx
How React is all you need to manage your application state

How to know what to test

testing, javascript
Practical advice to help you determine what to test.

AHA Testing πŸ’‘

testing, react, dry, wet, aha
How to apply the "Avoid Hasty Abstraction" principle to your test code.

AHA Programming πŸ’‘

programming, coding
The dangers of DRY, the web of WET, the awesomeness of AHA.

The State Reducer Pattern with React Hooks

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

Super simple start to serverless

serverless, servers, nodejs, netlify, lambda, functions
Easily create server code without worrying about managing servers yourself

How to get started with programming

programming, coding, beginner
So you want to get into programming? Here's how you get started.

How to Enable React Strict Mode

react, javascript
What it is and how to add it to your app.

Goodbye Medium

I've migrated from Medium to Here's why

React Hooks: Compound Components

react, react hooks
How do compound components change with React hooks?

🚨 Big Announcement: I'm a full-time educator! πŸ‘¨β€πŸ«

personal, career
After years of teaching on the side, I've decided to take the plunge and go full-time as an educator!

Should I useState or useReducer?

react, javascript, hooks
Two built-in React hooks that handle state, which one should you use?

Intentional Career Building

I have a challenge and ideas for you to do something to build your career.

Please stop building inaccessible forms (and how to fix them)

Accessibility, Forms
I regularly find inaccessible forms. In this post we'll check out some common accessibility problems and fix them.

Static vs Unit vs Integration vs E2E Testing for Frontend Apps

testing, testing trophy, testing pyramid, react, javascript
What these mean, why they matter, and why they don't

2018 in Review

javascript, 2018 in Review
An overview of what I've accomplished in 2018 and a bit about my goals for 2019.

React Hooks: Array Destructuring Fundamentals

javascript, react, babel, Destructuring, react hooks
React’s upcoming useState hook relies on array destructuring, let’s dive in and see how that feature works.

React Hooks: What's going to happen to my tests?

javascript, react, testing
How can we prepare our tests for React's new hooks feature?

React Hooks: What's going to happen to react context?

javascript, react, react Context, react hooks
With the cool new stuff coming to React (Hooks/Suspense), what's going to happen to the context api?

React Hooks: What's going to happen to render props?

react, react hooks, render props
What am I going to do with all these render props components now that react hooks solve the code reuse problem better than render props ever did?

Introducing a new course: Simplify React Apps with React Hooks and Suspense

react, react hooks, react suspense
Learn about the massive improvements coming to function components in React via a fresh new course showing you how to refactor an existing...

How Gratitude can make you a better developer

What does gratitude have to do with software development?

useEffect vs useLayoutEffect

react, javascript, react hooks
The simple rules for when to use each.

Testing Implementation Details

javascript, testing, react
Testing implementation details is a recipe for disaster. Why is that? And what does it even mean?

Common Testing Mistakes

javascript, testing
Today let's talk about some common mistakes that people make when testing JavaScript applications.

UI Testing Myths

react, testing
Some common myths around testing and what the reality is...

The Merits of Mocking

javascript, testing
What are you doing when you mock something, and when is it worth the cost?

The time I messed up

Tdd, javascript, testing
That time I went too far with Test Driven Development and forgot a very important step

React is an implementation detail

javascript, testing, react, Vue, Angular
...yep, you read that right. Most of the course actually has nothing to do with React specifically.

Eliminate an entire category of bugs with a few simple tools

javascript, testing
How you can use a few simple static code analysis tools to avoid common programming bugs.

Why you've been bad about testing

testing, javascript
Some common struggles people have with testing, and things you can do to improve.

Demystifying Testing

javascript, testing
How to get from aimlessly testing or not testing at all to really understanding how and what to test.

Confidently Shipping Code

testing, javascript
Why I care about testing

React/JSX as a server-side templating language

react, Jsx
Using React function components to render your website's skeleton index.html

How I am so productive

javascript, productivity, career, self
People regularly ask me how I get so much done. Here's my secret...

Getting Noticed and Widening Your Reach

open source, programming, career
Some things you can do to gain a wider audience and get your stuff noticed

Make Impossible States Impossible

javascript, web development
A simple trick to simplify your application and component state

How to make the most out of conferences

career, web development
Some specific things you can do as a conference attendee

Why and How I started public speaking

Public Speaking
Some stories and some advice from an international speaker and trainer

mdx-deck: slide decks powered by markdown and react

javascript, react
Why it's awesome, what it is, how it works, and how to use mdx-deck.

unpkg: An open source CDN for npm

Let's learn how unpkg the service and the open source project can improve performance for your company's apps.

Polyfill as needed with polyfill-service

javascript, Polyfill
How to maximize the performance of loading polyfills for your application users.

What is a polyfill

javascript, Polyfill
The difference between a polyfill and a code transform.

Why I Never Use Shallow Rendering

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

What is JSX?

react, javascript, Jsx
You may use it every day, but have you seen what happens after Babel compiles it?

Test Isolation with React

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

JavaScript default parameters

The expressive power of expressions in default values for parameters

Dealing with FOMO

web development
What is "Fear Of Missing Out" and how to deal with this natural unhealthy tendency.

🏎 downshift 2.0.0 released πŸŽ‰

react, preact, react native, javascript
Even better accessibility, React Native and ReasonReact support, even simpler API, improved docs, new examples site, Flow and TypeScript...

When to use Control Props or State Reducers

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

Write your own code transform for fun and profit

javascript, babel
How to write your own code macro with babel-plugin-macros 🎣

πŸ’― UPDATED: Advanced React Component Patterns βš›οΈ

javascript, react
Now featuring the latest React APIs (like context) and entirely new patterns (like state reducer props).

React DevTools

A quick demo of the browser extension you should definitely be using.

Prop Drilling

react, javascript
What it is, why it's good, why it's bad, and how to avoid common problems with it

How I learn an Open Source Codebase

open source, web development
What I do to learn and understand an open source project to which I want to contribute.

Mixing Component Patterns

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

Pure Modules

How you write your ES Modules impacts the performance and maintainability of your code.

Migrating to React's New Context API

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

How to React βš›οΈ

react, javascript
Let's see how learning React βš›οΈ in the right order can make it less overwhelming.

Compose Render Props

javascript, react, render props
One of the reasons I'm so excited about render props

Introducing the react-testing-library 🐐

react, javascript, testing
A simpler replacement for enzyme that encourages good testing practices.

When to NOT use Render Props

react, javascript, render props
Let's back up from the hype and think critically about the render props pattern

But really, what is a JavaScript mock?

javascript, testing, mocking
Let's take a step back and understand what mocks are and how to use them to facilitate testing in JavaScript.

Increase your marketability

javascript, career
Some tips of things that I've done that have helped me get where I want to be in the industry.

Solidifying what you learn

Learning, Teaching
Teaching is nature's way of letting you know how sloppy your understanding is.

The state reducer pattern βš›οΈ 🏎

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

Answers to common questions about render props

javascript, react
Because there's a ton of hype, and a bunch of questions βš›οΈ

React's βš›οΈ new Context API

javascript, react
It's way more ergonomic, it's no longer "experimental," and it's now a first-class API! OH, AND IT USES A RENDER PROP!

Concerning toolkits πŸ›  πŸ“¦

The merits and use cases of consolidating tools into one "zero config" toolkit.

Spelunking in node_modules πŸ‘·

javascript, Nodejs
Deep dive into Jest, React, and jsdom: A story about how I go about finding and fixing bugs in my dependencies.

Building Production Apps 100% in the browser

How I built & deployed 2 production apps without downloading any source code.

Testing βš›οΈ components using render props

javascript, testing, react
Let's look at how we can write tests for React components that use render props!

But really, what is a JavaScript test?

javascript, testing, web development
Let's take a step back and understand automated testing of JavaScript from square one.

Merry Christmas!

Christmas, Light The World
As I write this, it's Christmas Eve. My kids have fallen asleep and I've wrapped up the last few presents I've made or purchased for them...

The Beginner's Guide to ReactJS

The course is free forever on! Let's talk about how it teaches even developers experienced with React βš›οΈ

Giving good demos

I gave a pretty good demo and here are some things I did that might help you give good demos too.

Advanced React Component Patterns

javascript, react
An overview of some of the patterns covered in my recently released course (free until Friday).

Learn React Fundamentals πŸ†“ and Advanced Patterns βš›οΈ 🎁

react, javascript
Two and a half hours of new beginner (free) and advanced React material are now available!

Becoming an Open Source Project Maintainer

open source
Some tips and tricks that have worked for me.

Rendering a function with React

javascript, react, Iterators, ES6
How I tricked React into rendering a function (not call it... render it)

Improving the usability of your modules

javascript, open source
How to make your modules more generically useful and easier to test.

Effective Snapshot Testing

javascript, testing, jest
Snapshot testing can be useless, or super useful. Your choice. Let's talk about how to make them useful.

Make maintainable workarounds with codegen πŸ’₯

javascript, babel, Code, Macros
Sometimes you need to workaround issues in other libraries. These workarounds can often lead to messy code. codegen is a tool that helps...

How to give rendering control to users with prop getters

javascript, react
Render props are awesome, put it together with prop getters and you have an awesome combination to give users of your React components...

Tools without config πŸ› πŸ“¦

javascript, Toolboxes, automation, Create React App
TL;DR/Spoiler alert: I'm working on a tool at PayPal called paypal-scripts and a personal one called kcd-scripts. You should try it too!

Introducing downshift 🏎 for React βš›οΈ

javascript, react, preact, open source
downshift 🏎 is the primitive you need to build simple, flexible, WAI-ARIA compliant React...

How writing custom Babel & ESLint plugins can increase productivity & improve user experience

javascript, babel
And it's way more approachable than you think...

Classes, Complexity, and Functional Programming

When I use classes, when I don't, what I do instead, and why

Hi, thanks for reaching out to me πŸ‘‹

My generic response to requests for personal support

Introducing glamorous πŸ’„

react, javascript, css
A styled-components πŸ’… and jsxstyle inspired solution for styling βš›οΈ React Components from PayPal

Tips for making a CLI-based tool with node

javascript, NPM, Cli, Command Line, Node
I got this question on my AMA and decided to turn the answer into a formal blogpost.

Migrating to Jest

javascript, react, jest, testing, Nodejs
on the P2P team at PayPal

πŸŒ† Sunsetting JavaScript Air πŸŒ†

javascript, open source, Podcast, web development
for now... πŸŒ‡

Kent OOO (Out Of the Office)

Tech, javascript, Pioneers
Why this week's episode of JavaScript Air is canceled and where I'm going...

Introducing: How to Contribute to Open Source

open source, javascript, github
My free, first-timer friendly series all about how to contribute to open source projects on GitHub.

Misunderstanding ES6 Modules, Upgrading Babel, Tears, and a Solution

javascript, ES6, babeljs
On October 29th, 2015, Sebastian McKenzie, James Kyle, and the rest of the Babel team dropped a huge major release for frontend developers...

An Argument for Automation

javascript, automation, web development
Why it can be worth spending 1 hour automating a 10 second task

How getting into Open Source has been awesome for me

open source, javascript
An anecdotal argument for contributing and using open source

Semicolons in JavaScript: A preference

javascript, ES6
An argument for why use of semicolons in JavaScript source is a preference

Why users care about how you write code

Code, web development, User Experience
Your coding practices and technology choices impact user experience...

Please, don't commit commented out code

Git, github, Code
Some solid reasons you should delete code that is not used

Open Source Stamina

Nodejs, javascript, open source
You contribute best to something you use regularly.

Why I don't commit generated files to master

Git, github
for libraries...

How to Write a JavaScript Library

javascript, open source
There are so many reasons to open source your code. But knowing how to do it can be a real challenge.

First Timers Only

open source
A suggestion to Open Source project maintainers...

Newspaper Code Structure

Your code should read like a newspaper article. Important stuff at the top, details at the bottom. I have a particular convention for my...