Hooks, Dependencies and Stale Closures
Explains stale closures in React hooks, their connection to dependency arrays, and why the exhaustive-deps ESLint rule is crucial.
tkdodo.eu is the personal blog of Dominik Dorfmeister, a web developer from Vienna with a strong focus on React and TypeScript. Dominik is a co-maintainer of TanStack Query, one of the most popular async state management libraries in the React ecosystem, where he focuses on education, support, and explaining complex concepts in an approachable way. On his blog he writes in depth articles about React, TypeScript, React Query, async state management, and practical frontend patterns. Many posts are based on real questions from the community on Twitter, Stack Overflow, and the TanStack Discord, which makes the content very close to what developers struggle with in day to day work. He also helps maintain remeda, a TypeScript focused utility library, and often shows how strong typing and good tooling can make React apps safer and easier to maintain.
77 articles from this blog
Explains stale closures in React hooks, their connection to dependency arrays, and why the exhaustive-deps ESLint rule is crucial.
Exploring how to integrate React Query with forms, discussing server state vs client state and approaches for handling form data.
Explains how to leverage urgency to justify large-scale refactoring projects and gain organizational buy-in for technical improvements.
Explores the difference between optional parameters and undefined types in TypeScript, with practical examples from React Query.
Exploring offline capabilities and edge-case scenarios in React Query v3 for handling unreliable network connections in React applications.
A developer shares practical principles for successfully refactoring complex, large-scale codebases without introducing regressions.
Exploring TypeScript's 'any' type, its role as a top type, and how 'unknown' provides a safer alternative for type handling.
A guide on using the Query Function Context in React Query to avoid inline functions and improve code structure, part of a larger series.
A guide to using the useMutation hook in React Query for managing server state updates and side effects in React applications.
A comparison of React's useState and useReducer hooks for managing client state, discussing when to use each approach.
A guide to implementing robust error handling in React Query applications, covering standard patterns and best practices for failed data fetches.
Explores React Query's capabilities as a global state manager for asynchronous data, not just a data fetching library.
Explains how to use Placeholder and Initial Data in React Query to improve UX by avoiding loading spinners and pre-filling cache.
Explains JavaScript async functions, their benefits over promise chaining, and important behavioral differences like automatic promise wrapping.
A guide to structuring React Query keys effectively for caching, automatic refetching, and manual cache interactions in React applications.
A guide on integrating WebSockets with React Query to handle live data and real-time updates in a React application.
A guide to using TypeScript effectively with React Query, covering generics, type inference and common pitfalls for type-safe data fetching.
A software developer discusses the 'XY Problem' in tech support, where users ask about their attempted solution rather than the actual problem they need to solve.
A guide on testing React components that use React Query, covering network request mocking and testing strategies for async server state.
A guide to understanding and using status checks and boolean flags in React Query for effective data fetching state management.