Archive
56 notes in the garden
A complete, copy-pasteable TanStack Query v5 setup for the Next.js 16.4.3 App Router - per-request clients, server prefetch with streamed pending queries, HydrationBoundary, useSuspenseQuery, mutations that invalidate both caches, Cache Components, and the pitfalls.
How Next.js 16 turns thrown errors into UI and status codes (error.tsx, catchError, notFound, forbidden, unauthorized, redirect) and how the request lifecycle APIs after, connection, cookies, headers, draftMode and instrumentation.ts work under the hood.
How the App Router turns folders and special files into a loader tree, how that tree becomes nested layouts, boundaries and slots, and what dynamic, grouped, parallel and intercepted segments really do in Next.js 16.4.3.
A complete cookie-session auth build for Next.js 16, covering encrypted sessions with jose, login and logout Server Actions, an optimistic check in proxy.ts, a Data Access Layer with verifySession, authorization in actions and Route Handlers, unauthorized() and forbidden(), and the rules for auth under Cache Components.
How route.ts handlers are dispatched and when a GET is prerendered, and how proxy.ts (the renamed middleware) runs before routing, matches paths and talks to the router through response headers.
Fixes for the data and caching problems Next.js 16 developers hit most, from stale data after a mutation to the blocking-route error, each traced to the source line that causes it.
Hooks have no names or keys; React stores them as an ordered list on each component's fiber and matches them by call position, which is the whole reason the Rules of Hooks exist.
Each render sees a fixed snapshot of state; calling a setter queues an update instead of changing a variable, and React batches every update from one event into a single render that runs after your handler returns.
One click on "Add" in the shopping list app, followed from the root listener through batched sync updates, rendering, keyed reconciliation and the commit to the moment the new item is painted.
What React does once a render is finished, in what order DOM changes, refs and effects happen, and how to choose between useLayoutEffect and useEffect.