Kent C. Dodds
Search Kent C. Dodds Blogposts
If you can't find what you're looking for with this, try
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
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
How to get started using web workers for practical use cases
Don't Sync State. Derive It!
How to avoid state synchronization bugs and complexity with derived state.
State Colocation will make your React app faster
How state colocation makes your app not only more maintainable but also faster.
Profile a React App for Performance
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
How to start optimizing your React app renders
How to implement useState with useReducer
A fun exercise to help understand the differences and use cases of these two related hooks
Write fewer, longer tests
Making tests too short often leads to poor testing practices and way more tests.
How to get experience as a 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
Let's explore some hook gotchas and how to avoid them.
Avoid Nesting when you're Testing
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
At what point does it make sense to break a single component into multiple components?
Write tests. Not too many. Mostly integration.
Guillermo Rauch tweeted this a while back. Let's take a dive into what it means.
React Fundamentals: Props vs State
What's the difference between props and state in React?
How I Teach
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
Without using React.memo, PureComponent, or shouldComponentUpdate
Maintainability through colocation
When to useMemo and useCallback
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?
My silver bullet answer to this frequently posed question, and how to get started
Avoid the Test User
How your UI code has only two users, but the wrong tests can add a third
Authentication in React Applications
How to handle user authentication in modern React Applications with context and hooks
How to optimize your context value
Why and how you can optimize your context provider's value to avoid performance issues
How to use React Context effectively
How to create and expose React Context providers and consumers
Application State Management with React
How React is all you need to manage your application state
How to know what to test
Practical advice to help you determine what to test.
AHA Testing 💡
How to apply the "Avoid Hasty Abstraction" principle to your test code.
AHA Programming 💡
The dangers of DRY, the web of WET, the awesomeness of AHA.
The State Reducer Pattern with 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
Easily create server code without worrying about managing servers yourself
How to get started with programming
So you want to get into programming? Here's how you get started.
How to Enable React Strict Mode
What it is and how to add it to your app.
I've migrated from Medium to kentcdodds.com/blog... Here's why
React Hooks: Compound Components
How do compound components change with React hooks?
🚨 Big Announcement: I'm a full-time educator! 👨🏫
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?
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)
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
What these mean, why they matter, and why they don't
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
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?
How can we prepare our tests for React's new hooks feature?
React Hooks: What's going to happen to react context?
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?
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?
How Gratitude can make you a better developer
What does gratitude have to do with software development?
Introducing a new course: Simplify React Apps with React Hooks and Suspense
Learn about the massive improvements coming to function components in React via a fresh new course showing you how to refactor an existing...
useEffect vs useLayoutEffect
The simple rules for when to use each.
Testing Implementation Details
Testing implementation details is a recipe for disaster. Why is that? And what does it even mean?
Common Testing Mistakes
UI Testing Myths
Some common myths around testing and what the reality is...
The Merits of Mocking
What are you doing when you mock something, and when is it worth the cost?
The time I messed up
That time I went too far with Test Driven Development and forgot a very important step
React is an implementation detail
...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
How you can use a few simple static code analysis tools to avoid common programming bugs.
Why you've been bad about testing
Some common struggles people have with testing, and things you can do to improve.
How to get from aimlessly testing or not testing at all to really understanding how and what to test.
Confidently Shipping Code
Why I care about testing
React/JSX as a server-side templating language
Using React function components to render your website's skeleton index.html
How I am so productive
People regularly ask me how I get so much done. Here's my secret...
Getting Noticed and Widening Your Reach
Some things you can do to gain a wider audience and get your stuff noticed
Make Impossible States Impossible
A simple trick to simplify your application and component state
How to make the most out of conferences
Some specific things you can do as a conference attendee
Why and How I started public speaking
Some stories and some advice from an international speaker and trainer
mdx-deck: slide decks powered by markdown and 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
How to maximize the performance of loading polyfills for your application users.
What is a polyfill
The difference between a polyfill and a code transform.
Why I Never Use Shallow Rendering
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?
You may use it every day, but have you seen what happens after Babel compiles it?
Test Isolation with React
Why your tests should be completely isolated from one another and how to do that.
The expressive power of expressions in default values for parameters
Dealing with FOMO
What is "Fear Of Missing Out" and how to deal with this natural unhealthy tendency.
🏎 downshift 2.0.0 released 🎉
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
How to write your own code macro with babel-plugin-macros 🎣
💯 UPDATED: Advanced React Component Patterns ⚛️
Now featuring the latest React APIs (like context) and entirely new patterns (like state reducer props).
A quick demo of the browser extension you should definitely be using.
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
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...
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 ⚛️
Let's see how learning React ⚛️ in the right order can make it less overwhelming.
Compose Render Props
One of the reasons I'm so excited about render props
Introducing the react-testing-library 🐐
A simpler replacement for enzyme that encourages good testing practices.
When to NOT use Render Props
Let's back up from the hype and think critically about the render props pattern
Increase your marketability
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
Teaching is nature's way of letting you know how sloppy your understanding is.
The state reducer pattern ⚛️ 🏎
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
Because there's a ton of hype, and a bunch of questions ⚛️
React's ⚛️ new Context API
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 👷
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
Let's look at how we can write tests for React components that use render props!
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 egghead.io! 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
An overview of some of the patterns covered in my recently released egghead.io course (free until Friday).
Learn React Fundamentals 🆓 and Advanced Patterns ⚛️ 🎁
Two and a half hours of new beginner (free) and advanced React material are now available egghead.io!
Becoming an Open Source Project Maintainer
Some tips and tricks that have worked for me.
Rendering a function with React
How I tricked React into rendering a function (not call it... render it)
Improving the usability of your modules
How to make your modules more generically useful and easier to test.
Effective Snapshot Testing
Snapshot testing can be useless, or super useful. Your choice. Let's talk about how to make them useful.
Make maintainable workarounds with codegen 💥
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
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 🛠📦
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 ⚛️
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
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 💄
A styled-components 💅 and jsxstyle inspired solution for styling ⚛️ React Components from PayPal
Tips for making a CLI-based tool with node
I got this question on my AMA and decided to turn the answer into a formal blogpost.
Migrating to Jest
on the P2P team at PayPal
for now... 🌇
Kent OOO (Out Of the Office)
Introducing: How to Contribute to Open Source
My free, first-timer friendly egghead.io series all about how to contribute to open source projects on GitHub.
Misunderstanding ES6 Modules, Upgrading Babel, Tears, and a Solution
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
Why it can be worth spending 1 hour automating a 10 second task
How getting into Open Source has been awesome for me
An anecdotal argument for contributing and using open source
Why users care about how you write code
Your coding practices and technology choices impact user experience...
Please, don't commit commented out code
Some solid reasons you should delete code that is not used
Open Source Stamina
You contribute best to something you use regularly.
Why I don't commit generated files to master
There are so many reasons to open source your code. But knowing how to do it can be a real challenge.
First Timers Only
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...