Kent C. Dodds

Posts

2023 in Review A review of what happened in the life of Kent C. Dodds in 2023
Launching Epic Web The story of how Epic Web came to be
Stop Being a Junior Some advise for people who still consider themselves junior developers
RSC with Dan Abramov and Joe Savona Live Stream I had a live streamed conversation with Joe Savona and Dan Abramov. Here's a summary of our discussion.
Fixing a Memory Leak in a Production Node.js App How I found and fixed a memory leak on kentcdodds.com
2022 in Review A review of what happened in the KCD world in 2022
My Car Accident I was involved in a very bad car accident in 2022. Here's the story.
I Migrated from a Postgres Cluster to Distributed SQLite with LiteFS Why and how I migrated from distributed postgres to distributed sqlite on kentcdodds.com
I'm building EpicWeb.dev I've struck out on my own again to focus on my most ambitious project yet.
A review of my time at Remix As I move on to my next adventure, I want to take this opportunity to review what I accomplished while at Remix.
Remix: The Yang to React's Yin Remix fills the missing piece that all React web applications need: The Network Chasm
How I help you build better websites I'm making a career move to more effectively help you make the web (and the world) better.
Why I Love Remix I've written tens of thousands of lines of code with Remix and I want to tell you why I love using this framework.
The State Initializer Pattern A simple pattern used in libraries like downshift and ReachUI to enable component/hook users to initialize your state and even reset it to that initial value.
How to React ⚛️ Let's see how learning React ⚛️ in the right order can make it less overwhelming.
Get a catch block error message with TypeScript TypeScript forces you to acknowledge you can't know what was thrown making getting the error message a pain. Here's how you can manage it.
Building an awesome image loading experience How Unsplash's blurred image loading works and why I did mine differently for a more excellent experience on my site.
How Remix makes CSS clashes predictable Remix has this beautifully simple feature for CSS that I want to tell you all about.
Introducing the new kentcdodds.com This site just experienced a huge rewrite and I want to show you around a bit.
How I built a modern website in 2021 I rewrote kentcdodds.com using the latest technologies and I want to talk about what I did.
How to use React Context effectively How to create and expose React Context providers and consumers
Static vs Unit vs Integration vs E2E Testing for Frontend Apps What these mean, why they matter, and why they don't
The Testing Trophy and Testing Classifications How to interpret the testing trophy for optimal clarity
Array reduce vs chaining vs for loop A comparison of different approaches to operating on an array
Don't Solve Problems, Eliminate Them How eliminating problems can drastically simplify your codebases and life
Super Simple Start to Remix The simplest distraction-free version of a remix app
Super Simple Start to ESModules in Node.js All supported versions of Node.js support ESModules now. Here's how to get started using them.
JavaScript Pass By Value Function Parameters How it works and how to work with it... and around it
How to write a Constrained Identity Function (CIF) in TypeScript A handy advanced TypeScript pattern to increase your productivity.
How to optimize your context value Why and how you can optimize your context provider's value to avoid performance issues
How to write a React Component in TypeScript There are plenty of ways to do it, here's how I recommend typing React Components
TypeScript Function Syntaxes The syntax for various functions and function types in TypeScript with simple examples.
Listify a JavaScript Array Make a human readable list from an array in JavaScript.
Build vs Buy: Component Libraries edition Some things to think about before you decide to create your own component library.
Using fetch with TypeScript How to make HTTP requests with fetch and TypeScript
Wrapping React.useState with TypeScript How to make a custom hook that wraps useState with TypeScript properly
Define function overload types with TypeScript Have your JS expressiveness and type it too.
2020 in Review An overview of what I accomplished in 2020 and a bit about my goals for 2021.
Business and Engineering alignment How to convince "the business folks" to let you do what you want.
Hi, thanks for reaching out to me 👋 How to get help from Kent
useEffect vs useLayoutEffect The simple rules for when to use each.
Super simple start to Firebase functions The simplest getting started guide for Firebase Cloud functions
Super simple start to Netlify functions Easily create server code without worrying about managing servers yourself
Super Simple Start to css variables How to get started using css variables
Favor Progress Over Pride in Open Source How I deprecated my most popular open source project in favor of a better library
Testing Implementation Details Testing implementation details is a recipe for disaster. Why is that? And what does it even mean?
How getting into Open Source has been awesome for me An anecdotal argument for contributing and using open source
useState lazy initialization and function updates When to pass a function to useState and setState
Use ternaries rather than && in JSX What problems can happen when you use && to conditionally render content in JSX
Application State Management with React How React is all you need to manage your application state
Use react-error-boundary to handle errors in React How to simplify your React apps by handling React errors effectively with react-error-boundary
JavaScript to Know for React What JavaScript features you should be familiar with when learning and using React
How I structure Express apps The build/dev tools and scripts I use for Node backends.
What open source project should I contribute to? My silver bullet answer to this frequently posed question, and how to get started
When I follow TDD Test-Driven Development doesn't always make sense, here's when it does for me.
AHA Programming 💡 The dangers of DRY, the web of WET, the awesomeness of AHA.
How I Record Educational Videos My process for making high value-to-minute content.
Should I write a test or fix a bug? How to prioritize tests relative to everything else.
Stop mocking fetch Why you shouldn't mock fetch or your API Client in your tests and what to do instead.
Intentional Career Building A challenge and ideas for you to do something to build your career.
Improve test error messages of your abstractions How to manipulate stack traces to get beautiful error messages with Jest and your test helper functions.
Tracing user interactions with React How to use the (EXPERIMENTAL) interactions tracing API in React.
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.
Common mistakes with React Testing Library Some mistakes I frequently see people making with React Testing Library.
Super Simple Start to React The most simple React setup imaginable
Stop using client-side route redirects 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.
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.
Function forms When I prefer to use function declarations instead of arrow functions
Replace axios with a simple custom fetch wrapper Axios can do a ton of stuff, but here's a simpler solution that can handle most use cases
How to test custom React hooks Get confidence your custom React hooks work properly with solid tests.
React Production Performance Monitoring How to set up performance monitoring for production React applications.
Should I useState or useReducer? Two built-in React hooks that handle state, which one should you use?
Stop using isLoading booleans Why using a status enum (or even better: a state machine) will help your app stay bug free
Make Your Test Fail If you're not careful you can write a test that's worse than having no tests at all
Make your own DevTools How creating DevTools specific for your own app can improve your productivity
An Argument for Automation Why it can be worth spending 1 hour automating a 10 second task
Fix the "not wrapped in act(...)" warning There are a few reasons you're getting this warning. Here's how you fix it.
Super Simple Start to ESModules in the Browser All major browsers support ESModules now. Here's how to get started using them.
Implementing a simple state machine library in JavaScript Let's write a state machine abstraction together to understand it better
2010s Decade in Review The 2010s are over, time to think back, then forward
Why users care about how you write code Your coding practices and technology choices impact user experience...
Why I avoid nesting closures A little tendency I have to reduce cognitive load for readers of my code.
Don't call a React function component The difference between React.createElement and calling a function component directly
Why your team needs TestingJavaScript.com A letter you can copy/paste and send to your boss.
Inversion of Control A simple principle that can drastically improve your reusable code
Understanding React's key prop The key prop is a mechanism for controlling component instances.
How to Enable React Concurrent Mode 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 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 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
Colocation 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.
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 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.
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.
Goodbye Medium 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!
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.
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...
Common Testing Mistakes Today let's talk about some common mistakes that people make when testing JavaScript applications.
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.
Why you've been bad about testing Some common struggles people have with testing, and things you can do to improve.
Demystifying Testing 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.
JavaScript default parameters 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).
React DevTools A quick demo of the browser extension you should definitely be using.
Prop Drilling 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...
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.
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
But really, what is a JavaScript mock? Let's take a step back and understand what mocks are and how to use them to facilitate testing in JavaScript.
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!
But really, what is a JavaScript test? Let's take a step back and understand automated testing of JavaScript from square one.
Merry Christmas! 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
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
🌆 Sunsetting JavaScript Air 🌆 for now... 🌇
Kent OOO (Out Of the Office) Why this week's episode of JavaScript Air is canceled and where I'm going...
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...
Semicolons in JavaScript: A preference An argument for why use of semicolons in JavaScript source is a preference
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 for libraries...
How to Write a JavaScript Library 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...