The Vertical Codebase 🔗
Let's take a look at why the common, horizontal code structure is not ideal, where it breaks down, and what we can do about it. [...]
TkDodo's blog
Posts
Test IDs are an a11y smell 🔗
Users don't use data-testid, so why do your tests? [...]
Creating Query Abstractions 🔗
Building reusable abstractions on top of libraries that rely on type inference can be deceptively difficult, which is why we need better ways to build [...]
Building Type-Safe Compound Components 🔗
Compound Components are great, but should be type-safe. No, this isn't about the children prop ... [...]
2025 in Review 🔗
A retrospective on what has happened for me in 2025 [...]
Designing Design Systems 🔗
I want to write more about what makes a good design system. This is the unstructured list of principles I think matter. [...]
Omit for Discriminated Unions in TypeScript 🔗
Why TypeScript’s built-in Omit breaks discriminated unions, and how a distributive version preserves them. [...]
Tooltip Components Should Not Exist 🔗
A look at why tooltip components are often the wrong abstraction in design systems, leading to accessibility issues, misuse, and inconsistent user exp [...]
Context Inheritance in TanStack Router 🔗
An overview of how TanStack Router automatically shares and infers path params, search params, and context between nested routes in a type-safe way. [...]
Deriving Client State from Server State 🔗
How to use derived state in React to keep client state and server data aligned without manual sync or effects. [...]
React Query Selectors, Supercharged 🔗
How to get the most out of select, sprinkled with some TypeScript tips. [...]
The Useless useCallback 🔗
Why most memoization is downright useless... [...]
The Beauty of TanStack Router 🔗
Yes, it's type-safe, but there's so much more to love about TanStack Router. [...]
Concurrent Optimistic Updates in React Query 🔗
How to build optimistic UI that is resilient to race conditions, even when multiple mutations update the same entity concurrently. [...]
My Open Source Origin Story 🔗
A brief story of how I got into Open Source [...]
2024 in Review 🔗
A retrospective on what has happened for me in 2024 [...]
React Query - The Bad Parts 🔗
In this talk, maintainer Dominik will explore the other side—the less favorable aspects of React Query and situations where it may not be the best fit [...]
Ref Callbacks, React 19 and the Compiler 🔗
Reflecting on useCallback, how the Compiler changed my thinking about it, and what React 19 has in store for Ref Callbacks... [...]
My Slow Retreat from Twitter 🔗
A brief reflection on the platform and how I plan to continue with it... [...]
React Query API Design - Lessons Learned 🔗
In this talk, React Query maintainer Dominik will walk us through some of the API design choices that were made in React Query to get to that DX. You' [...]
Component Composition is great btw 🔗
Component composition is one of the best parts of React, and I think we should take more time to break our components into manageable parts before lit [...]
How Infinite Queries work 🔗
A serious bug report about infinite queries led me to question it's architecture, but it all turned out fine in the end ... [...]
Introducing XState Store 🔗
There's a new state manager in the game, and it ticks all my boxes ... [...]
Please Stop Using Barrel Files 🔗
Why you probably shouldn't be adding index.ts files everywhere [...]
React 19 and Suspense - A Drama in 3 Acts 🔗
React 19 is a very promising release - but there's something not quite right yet with suspense... [...]
Automatic Query Invalidation after Mutations 🔗
Even though there is nothing built into React Query, it doesn't need a lot of code to implement automatic query invalidation in user-land thanks to th [...]
Zustand and React Context 🔗
Zustand stores a global and don't need React Context - but sometimes, it makes sense to combine them regardless. [...]
Avoiding Hydration Mismatches with useSyncExternalStore 🔗
Avoiding hydration mismatches can usually be done in two ways - suppressing the warning or spawning an effect. But is there a third option ... ? [...]
The Query Options API 🔗
v5 brought a new, powerful API, especially if you're using React Query with TypeScript... [...]
2023 in Review 🔗
A retrospective on what has happened for me in 2023 [...]
Why You Want React Query 🔗
Let's take a look at why you'd want a library like React Query, even if you don't need all the extra features it provides... [...]
The Uphill Battle of Memoization 🔗
Exploring why React.memo shouldn't be your first choice for performance optimizations [...]
Array Types in TypeScript 🔗
is string[] really better than Array? Of course not! [...]
React Query and React Context 🔗
Can it make sense to combine React Query with React Context ? Yes, sometimes ... [...]
Thinking in React Query 🔗
In this talk, we will learn how a different mindset can help us understand React Query and work with it efficiently. [...]
You Might Not Need React Query 🔗
React Query is a great library, but like any tool, you should choose it for the right problem [...]
Breaking React Query's API on purpose 🔗
Why good API design matters, even if it means breaking existing APIs in the face of resistance. [...]
OSS Feature Decision Tree 🔗
An outline of the questions I try to ask myself before adding new features [...]
Why React isn't dying 🔗
Finishing my train of thought about why React is here to stay (for now). [...]
Type-safe React Query 🔗
About the difference between "having types" and "being type-safe"... [...]
2022 in Review 🔗
A retrospective on what has happened for me in 2022 [...]
Inside React Query 🔗
Taking a look under the hood of React Query [...]
Working with Zustand 🔗
Let's dive into some tips for working with Zustand - one of my favourite client state management libraries in React. [...]
Refactor impactfully 🔗
Why not every refactoring is worth doing... [...]
Seeding the Query Cache 🔗
With suspense for data fetching on the horizon, it is now more important than ever to make sure your cache is seeded properly to avoid fetch waterfall [...]
Refs, Events and Escape Hatches 🔗
Refs can provide a way to sidestep dependency arrays without violating any rules, and the proposed useEvent hook might make working with functions and [...]
React Query meets React Router 🔗
React Query and React Router are a match made in heaven. [...]
Avoiding useEffect with callback refs 🔗
Interacting with DOM nodes doesn't necessarily need useEffect [...]
React Query FAQs 🔗
Answering the most frequently asked React Query questions [...]
Hooks, Dependencies and Stale Closures 🔗
Let's demystify what stale closures are in combination with react hooks with the help of the analogy of taking a photo ... [...]
React Query and Forms 🔗
Forms tend to blur the line between server and client state, so let's see how that plays together with React Query. [...]
Use Urgency 🔗
Getting huge refactorings going is not an easy task, but urgency can help here. [...]
optional vs. undefined 🔗
There is a subtle difference between optional fields and required, but potentially undefined ones. [...]
Offline React Query 🔗
A glimpse at what v4 will bring for offline queries [...]
Always provide customer value 🔗
Finding the right spot for doing a refactoring can be tricky [...]
Road to Refactoring 🔗
A blogpost series about patterns that have helped me succeed with refactorings [...]
2021 in Review 🔗
A retrospective on what has happened for me in 2021 [...]
Beware the leaking any 🔗
Any is not among my favourite TypeScript types, but it is the one you will inevitably encounter. Let's see what makes it so dangerous. [...]
Leveraging the Query Function Context 🔗
Use what React Query provides for optimal type safety [...]
Mastering Mutations in React Query 🔗
Learn all about the concept of performing side effects on the server with React Query. [...]
useState vs useReducer 🔗
To useState or useReducer, that is the question... [...]
React Query Error Handling 🔗
After covering the sunshine cases of data fetching, it's time to look at situations where things don't go as planned and "Something went wrong..." [...]
React Query as a State Manager 🔗
Everything you need to know to make React Query your single source of truth state manager for your async state [...]
Placeholder and Initial Data in React Query 🔗
Learn about the different possibilities to avoid loading spinners in React Query. [...]
About async functions 🔗
A deep dive into async functions and how they are different from promise chaining [...]
Effective React Query Keys 🔗
Learn how to structure React Query Keys effectively as your App grows [...]
Using WebSockets with React Query 🔗
A step-by-step guide on how to make real-time notifications work with react-query [...]
React Query and TypeScript 🔗
Combine two of the most powerful tools for React Apps to produce great user experience, developer experience and type safety. [...]
How can I ... ? 🔗
Asking the right questions is a form of art that needs to be mastered. [...]
Testing React Query 🔗
Let's take a look at how to efficiently test custom useQuery hooks and components using them. [...]
Status Checks in React Query 🔗
How the wrong status check order can negatively impact user experience [...]
React Query Render Optimizations 🔗
An advanced guide to minimize component re-renderings when using React Query [...]
useState for one-time initializations 🔗
Why you shouldn't rely on useMemo for guaranteed referential stability but prefer useState instead [...]
React Query Data Transformations 🔗
Learn the possibilities to perform the quite common and important task of transforming your data with react-query [...]
No love for boolean parameters 🔗
Innocent looking boolean parameters, or flags, are often the reason for hard to maintain legacy code. Resist the urge of adding them! [...]
Things to know about useState 🔗
5 things everyone needs to know about useState [...]
Simplifying useEffect 🔗
useEffect hooks can be hard to reason about, but I have 5 principles that can help to manage them [...]
Flow to TypeScript migration journey 🔗
How we migrated over 100k lines of code from Flow to TypeScript. A Journey. [...]
On naming things 🔗
Naming is hard. Naming is subjective. Yet there are some things we can objectively do when it comes to finding proper names. [...]
Practical React Query 🔗
Let me share with you the experiences I have made lately with React Query. Fetching data in React has never been this delightful... [...]
Avoiding legacy systems 🔗
Every software will eventually become a nightmare to maintain, unless we actively do something about it. [...]
Putting props to useState 🔗
Part deux of the useState pitfalls series is here, showing patterns to help solve the common use-case of initializing state with a prop. [...]
The power of const assertions 🔗
const assertions are a criminally underused TypeScript feature - learn all about them here, now [...]
Pedantic index signatures in TypeScript 4.1 🔗
Accessing objects and arrays has never been safe in TypeScript, but this is about to change ... [...]
Why I don't like reduce 🔗
If you know me, you know I'm no fan of Array.reduce. I'll explain why in detail in this post. [...]
Calling JavaScript from TypeScript 🔗
Gradually migrating from JS to TS is not without difficulties - here are some tricks to smoothen the interoperability [...]
Solving conflicts in package-lock.json 🔗
Why you should never delete package-lock.json and how npm can solve the conflicts for you [...]
Don't over useState 🔗
The first part of the useState pitfalls series is all about avoiding state altogether. Lots of things might not even be state after all... [...]
Exhaustive matching in TypeScript 🔗
Keep reading. [...]