Tag: reactjs

React/Next : What Runs When, and What Comes Out

Here's a test. Take this component:

How React Actually Updates the DOM — VDOM, Reconciliation, Fiber, and Why Signals Are a Different Idea Entirely

Here’s a question I sat with for longer than I should have: if React’s Virtual DOM is supposed to make things faster, why does a complex React app sometimes feel slower than a simple jQuery one?

Reliable Query Prefetching with TanStack Router

Prefetching in route loaders is great, but comes at a cost. We have to keep loaders in-sync with components...

TanStack Router and Query

TanStack Router has a built-in cache, so why would we need TanStack Query? There are, of course, reasons ...

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 those abstractions ...

Building Type-Safe Compound Components

Compound Components are great, but should be type-safe. No, this isn't about the children prop ...

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 experiences.

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.

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. No library is perfect; every choice involves trade-offs. By the end of this talk, you'll have a better understanding of React Query's limitations and why it remains a compelling choice despite them.

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...

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'll hear stories about things that went well, but also about tradeoffs and mistakes that were made, and what lessons we can all learn from those.

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 littering one component with conditional renderings.

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 ...

Nathan Walker, Eduardo Speroni - NativeScript

Nathan Walker and Eduardo Speroni dive into NativeScript's ability to bridge JavaScript with native platform APIs for cross-platform mobile development.

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 the global cache callbacks.

Zustand and React Context

Zustand stores a global and don't need React Context - but sometimes, it makes sense to combine them regardless.

Using Shadcn-ui with Inertia and AdonisJS

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...

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

React Query and React Context

Can it make sense to combine React Query with React Context ? Yes, sometimes ...

Appwrite Hackaton: MoviePlay

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.

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"...

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.

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 waterfalls.

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 effects a lot easier...

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.

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

Hook, line, and sinker

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.