Frontend & UI
20 posts tagged #react on DiCodeWeb, from fundamentals to production, newest first.
20 postsUpdated Sep 8, 2026
When native elements run out, ARIA is a contract you have to keep. The accessibility tree and name computation, roving tabindex vs aria-activedescendant, a combobox and tabs built step by step, live regions that really announce, focus on route changes, and how to test it all.
Data from the server isn't yours — you only hold a copy with an expiry date. This post goes deep on TanStack Query v5 through the lens of caching: query key design, staleTime and gcTime, invalidation, optimistic updates with rollback, Suspense, hydration with the Next.js App Router, infinite queries, and when not to use it.
"use client" doesn't mark a kind of component; it marks where the client graph begins. This post rebuilds the mental model for RSC in Next.js 16: what crosses the boundary, where data fetching belongs, waterfalls, streaming, and the mistakes that bloat bundles or leak data.
Headless hooks with prop getters, compound components over context, asChild and render props, useControllableState for controlled and uncontrolled modes, keyboard and ARIA as part of the API, the cost of polymorphism in TypeScript, and when to use Radix, React Aria or Base UI instead of building your own.
Next.js 16 drops the implicit caching of the old App Router: everything is dynamic by default and you opt in with use cache. This post covers the static shell and dynamic holes, cache keys, cacheLife, cacheTag with updateTag, revalidateTag and refresh, and an e-commerce product page built end to end.
Tool calling is really a loop that your code drives. This post covers defining tools with schemas, an agent loop with a step limit, handling invalid arguments, a message list with typed parts, streaming partial arguments, rendering tool calls as components, and making users confirm tools with side effects.
How View Transitions snapshot the page and build a pseudo-element tree, startViewTransition in an SPA, transitions between documents, view-transition-name, view-transition-class and types, a list-to-detail shared element, reduced motion, performance traps, and using React's ViewTransition component in Next.js 16.
The frontend half that AI chat tutorials tend to skip: picking a transport, parsing SSE by hand when events are split across chunks, a Route Handler that keeps the API key safe and propagates cancellation upstream, message-parts state, batching renders with requestAnimationFrame, safe incremental markdown, autoscroll, accessibility and error handling.
A search-suggestion box looks simple, yet it packs nearly every hard frontend problem into one component: race conditions, debounce, caching, flicker-free states, the WAI-ARIA combobox pattern, IME typing and testing. This post builds it piece by piece in React + TypeScript.
How I design and build UI for features whose output changes every time: latency budgets and streaming, suggestions that can be accepted, edited or rejected with a typed state model, undo and preview, honest sources, feedback wired to analytics, graceful failure and accessibility.
A correct mental model of the browser event loop — tasks, microtasks, frames — tested with predict-the-output puzzles, then used to explain why UIs freeze and how to chunk work, yield to the main thread and move heavy work to a Web Worker.
React's escaping does a lot for you, but not everything. This post walks through the XSS holes React doesn't cover, building a strict nonce-based CSP in Next.js, Trusted Types, CSRF in the SameSite era, where to store tokens, and how to stop clickjacking.
Building a virtual list in React + TypeScript by hand: windowing math with real numbers, overscan, variable heights with prefix sums and binary search, measuring with ResizeObserver, preventing scroll jumps, accessibility — and when not to virtualize at all.
What React Compiler actually does, the Rules of React it relies on, the ESLint plugin, incremental rollout with annotation mode and "use no memo", what to do with existing useMemo/useCallback, how to verify it works, common bailouts, third-party libraries and build cost.
How signals track dependencies, why push-pull gives glitch-free updates, how Solid, Preact, Angular and Vue use them, where the TC39 proposal stands, what the React Compiler changes, and the production pitfalls — with a tiny signal implementation in TypeScript.
A practical guide to shrinking the JavaScript you ship up front by combining route-level and component-level lazy loading.
React 19 brings forms closer to plain HTML: the action prop, pending state, optimistic updates and Server Actions. This post walks through how I build a complete signup form — validated on both sides, with per-field errors, accessible, and working even before JavaScript loads.
What makes a component re-render, why a re-render isn't a DOM update, how to measure with the React DevTools Profiler, the real cost of memo/useMemo/useCallback, splitting context, colocating state, keys in lists, and how the React Compiler changes the picture.
Classify errors before handling them, understand what error boundaries do and don't catch, retry properly with backoff and jitter, separate user-facing messages from developer logs, and report errors without leaking personal data.
Why isLoading, isError and data living side by side breed bugs, how to model UI as states and events, a typed useReducer state machine for a submit flow, and when a statechart library is worth it.