Page 13 - React

Mutable state is the most common source of hard-to-find bugs in JavaScript applications. Immutability patterns make state changes explicit, enable change detection through reference comparison, and prevent shared state from being modified in unexpected places, from Object.freeze all the way to Records and Tuples.

shadcn/ui is not a library in the classic sense, it is a catalog of copy-paste components built on Radix UI. Anyone who understands the copy-paste model can build a fully controllable, themeable component library for their own design system on top of it.

A CSS refactor can leave a component functionally unchanged and still silently break the layout. Unit and component tests check behavior, not appearance. Visual regression testing closes exactly this gap by comparing screenshots against a baseline, surfacing every pixel deviation before it reaches production.

Bringing TypeScript in React to the right level means more than typing props with interfaces. The satisfies operator, Template Literal Types, generics in components and discriminated unions enable props APIs that are impossible to misuse at runtime, because TypeScript flags every error while you write the code.

Tests that check implementation details break with every refactor. React Testing Library enforces tests from the user's perspective, with getByRole instead of getByTestId, userEvent instead of fireEvent, and MSW instead of fetch mocks.

An image that loads after the rest of the layout has settled pushes visible content around and hurts the Cumulative Layout Shift score. React Suspense lets you deliberately hold back rendering an image component until the file is actually sitting in the browser cache. This article shows a custom preload pattern built on promise wrapping, including caching, error handling, and the limits of the approach.

The React error boundary interface internally works with the type unknown for caught errors, which often forces fallback components to fall back on any or unsafe casts. With generic type parameters and discriminated error types, error boundaries can be built that hand the caller concrete, typed error information.

Skeleton screens and spinners solve the same technical problem, bridging the gap between a user action and visible content, but they differ sharply in how they affect perceived wait time. This article compares both approaches, shows when each one is the better fit, and walks through implementing content-aware skeletons as React Suspense fallbacks.

Jest was the standard for React tests for years, with a slow start, cumbersome transformer configuration, and growing incompatibilities with ESM. Vitest shares Vite's configuration and transformer, starts in milliseconds, offers a Jest-compatible API, and integrates seamlessly into Vite-based React projects.

A page query that lists every field for ten components in one block turns into a merge conflict magnet with every change. GraphQL fragments break queries into named, reusable building blocks that live right next to the component consuming them, solving maintainability problems that become unavoidable as an application grows.