A review of what happened in the life of Kent C. Dodds in 2023

The story of how Epic Web came to be

Some advise for people who still consider themselves junior developers

I had a live streamed conversation with Joe Savona and Dan Abramov. Here's a summary of our discussion.

How I found and fixed a memory leak on kentcdodds.com

A review of what happened in the KCD world in 2022

I was involved in a very bad car accident in 2022. Here's the story.

Why and how I migrated from distributed postgres to distributed sqlite on kentcdodds.com

I've struck out on my own again to focus on my most ambitious project yet.

As I move on to my next adventure, I want to take this opportunity to review what I accomplished while at Remix.

Remix fills the missing piece that all React web applications need: The Network Chasm

I'm making a career move to more effectively help you make the web (and the world) better.

I've written tens of thousands of lines of code with Remix and I want to tell you why I love using this framework.

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.

Let's see how learning React ⚛️ in the right order can make it less overwhelming.

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.

How Unsplash's blurred image loading works and why I did mine differently for a more excellent experience on my site.

Remix has this beautifully simple feature for CSS that I want to tell you all about.

This site just experienced a huge rewrite and I want to show you around a bit.

I rewrote kentcdodds.com using the latest technologies and I want to talk about what I did.

How to create and expose React Context providers and consumers

What these mean, why they matter, and why they don't

How to interpret the testing trophy for optimal clarity

A comparison of different approaches to operating on an array

How eliminating problems can drastically simplify your codebases and life

The simplest distraction-free version of a remix app

All supported versions of Node.js support ESModules now. Here's how to get started using them.

How it works and how to work with it... and around it

A handy advanced TypeScript pattern to increase your productivity.

Why and how you can optimize your context provider's value to avoid performance issues

There are plenty of ways to do it, here's how I recommend typing React Components

The syntax for various functions and function types in TypeScript with simple examples.

Make a human readable list from an array in JavaScript.

Some things to think about before you decide to create your own component library.

How to make HTTP requests with fetch and TypeScript

How to make a custom hook that wraps useState with TypeScript properly

Have your JS expressiveness and type it too.

An overview of what I accomplished in 2020 and a bit about my goals for 2021.

How to convince "the business folks" to let you do what you want.

How to get help from Kent

The simple rules for when to use each.

The simplest getting started guide for Firebase Cloud functions

Easily create server code without worrying about managing servers yourself

How to get started using css variables

How I deprecated my most popular open source project in favor of a better library

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

An anecdotal argument for contributing and using open source

When to pass a function to useState and setState

What problems can happen when you use && to conditionally render content in JSX

How React is all you need to manage your application state

How to simplify your React apps by handling React errors effectively with react-error-boundary

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

The build/dev tools and scripts I use for Node backends.

My silver bullet answer to this frequently posed question, and how to get started

Test-Driven Development doesn't always make sense, here's when it does for me.

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

My process for making high value-to-minute content.

How to prioritize tests relative to everything else.

Why you shouldn't mock fetch or your API Client in your tests and what to do instead.

A challenge and ideas for you to do something to build your career.

How to manipulate stack traces to get beautiful error messages with Jest and your test helper functions.

How to use the (EXPERIMENTAL) interactions tracing API in React.

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

Some mistakes I frequently see people making with React Testing Library.

The most simple React setup imaginable

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.

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

When I prefer to use function declarations instead of arrow functions

Axios can do a ton of stuff, but here's a simpler solution that can handle most use cases

Get confidence your custom React hooks work properly with solid tests.

How to set up performance monitoring for production React applications.

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

Why using a status enum (or even better: a **state machine**) will help your app stay bug free

If you're not careful you can write a test that's worse than having no tests at all

How creating DevTools specific for your own app can improve your productivity

Why it can be worth spending 1 hour automating a 10 second task

There are a few reasons you're getting this warning. Here's how you fix it.

All major browsers support ESModules now. Here's how to get started using them.

Let's write a state machine abstraction together to understand it better

The 2010s are over, time to think back, then forward

Your coding practices and technology choices impact user experience...

A little tendency I have to reduce cognitive load for readers of my code.

The difference between React.createElement and calling a function component directly

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

A simple principle that can drastically improve your reusable code

The key prop is a mechanism for controlling component instances.

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

This is how you get started in testing your application

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

User interface tests are famously finicky and prone to breakage. Let's talk about how to improve this.

How to get started using web workers for practical use cases

How to avoid state synchronization bugs and complexity with derived state.

How state colocation makes your app not only more maintainable but also faster.

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

How to start optimizing your React app renders

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

Making tests too short often leads to poor testing practices and way more tests.

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

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

Why using hooks like beforeEach as a mechanism for code reuse leads to unmaintainable tests and how to avoid it.

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

[Guillermo Rauch](https://twitter.com/rauchg) [tweeted](https://twitter.com/rauchg/status/807626710350839808) this a while back. Let's take a dive into what it means.

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

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

Without using React.memo, PureComponent, or shouldComponentUpdate

Maintainability through colocation

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.

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

How to handle user authentication in modern React Applications with context and hooks

Practical advice to help you determine what to test.

How to apply the "Avoid Hasty Abstraction" principle to your test code.

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

What it is and how to add it to your app.

I've migrated from Medium to kentcdodds.com/blog... Here's why

How do compound components change with React hooks?

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

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

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

React's upcoming useState hook relies on array destructuring, let's dive in and see how that feature works.

How can we prepare our tests for React's new hooks feature?

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

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?

What does gratitude have to do with software development?

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

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

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

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

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

...yep, you read that right. Most of the course actually has nothing to do with React specifically.

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.

Why I care about testing

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

People regularly ask me how I get so much done. Here's my secret...

Some things you can do to gain a wider audience and get your stuff noticed

A simple trick to simplify your application and component state

Some specific things you can do as a conference attendee

Some stories and some advice from an international speaker and trainer

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

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

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

The difference between a polyfill and a code transform.

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

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

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

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

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

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

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

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

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

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.

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

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

A simpler replacement for enzyme that encourages good testing practices.

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

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

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

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

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

Because there's a ton of hype, and a bunch of questions ⚛️

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!

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

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

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

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

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

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 course is free forever on egghead.io! Let's talk about how it teaches even developers experienced with React ⚛️

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

An overview of some of the patterns covered in my recently released egghead.io course (free until Friday).

Two and a half hours of new beginner (free) and advanced React material are now available egghead.io!

Some tips and tricks that have worked for me.

How I tricked React into rendering a function (not call it... render it)

How to make your modules more generically useful and easier to test.

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

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

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

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!

downshift 🏎 is the primitive you need to build simple, flexible, WAI-ARIA compliant React...

And it's way more approachable than you think...

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

A styled-components 💅 and jsxstyle inspired solution for styling ⚛️ React Components from PayPal

I got this question on my AMA and decided to turn the answer into a formal blogpost.

on the P2P team at PayPal

for now... 🌇

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

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

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 why use of semicolons in JavaScript source is a preference

Some solid reasons you should delete code that is not used

You contribute best to something you use regularly.

for libraries...

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

A suggestion to Open Source project maintainers...

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