React on Commentary of Takao

Robust Frontend Exception Management with Error Boundaries

Tue, 20 Jan 2026 00:00:00 +0900

Why Error Boundaries Matter

In React applications, a single uncaught JavaScript error in a component can crash the entire UI. Before Error Boundaries, this meant users would see a white screen with no indication of what went wrong. Error Boundaries are React components that catch JavaScript errors anywhere in their child component tree and render a fallback UI instead of crashing.

Implementing an Error Boundary

Error Boundaries are class components that implement one or both of the static lifecycle methods getDerivedStateFromError and componentDidCatch:

React Compiler: Say Goodbye to Manual Memoization

Sat, 10 Jan 2026 00:00:00 +0900

Introduction

For years, React developers have manually optimized re-renders with useMemo, useCallback, React.memo, and various state-management heuristics. The React Compiler (formerly known as React Forget) changes this paradigm entirely. It is a build-time tool that automatically memoizes React components, hooks, and values by analyzing reactive dependencies at compile time, eliminating the need for manual optimization hooks.

The Problem with Manual Memoization

Consider a typical filtered list component:

function UserList({ users, filter }) {
 const filtered = useMemo(
 () => users.filter(u => u.name.includes(filter)),
 [users, filter]
 );

 const handleClick = useCallback((id) => {
 console.log('Clicked:', id);
 }, []);

 return (
 <ul>
 {filtered.map(user => (
 <UserRow key={user.id} user={user} onClick={handleClick} />
 ))}
 </ul>
 );
}

const UserRow = React.memo(({ user, onClick }) => (
 <li onClick={() => onClick(user.id)}>{user.name}</li>
));

This works, but it is verbose, error-prone (missing or incorrect dependency arrays), and easy to forget. A missing useMemo on a large list causes unnecessary re-renders; an incorrect dependency array causes stale closures.

Designing Clean React Custom Hooks for Reusability

Sun, 10 Aug 2025 00:00:00 +0900

Introduction

As you develop React components, you may find that files grow to hundreds of lines. This happens when useState, useEffect, API queries, and validation logic mix with rendering markup, making the component hard to read and maintain.

This mixing of concerns makes writing unit tests difficult and increases the risk of copy-paste bugs when reusing logic across different views.

The best way to separate UI (presentation) from business logic (behavior) in React is to create Custom Hooks. This guide outlines the core design guidelines for building reusable custom hooks.

Stop Overusing useMemo and useCallback in React

Fri, 20 Jun 2025 00:00:00 +0900

Introduction

When optimizing React application performance, developers often reach for useMemo and useCallback.

It is tempting to wrap every object and function in these hooks, assuming that caching outputs will automatically speed up the application. However, this is a common misconception.

Unnecessary memoization does not just make code harder to read; it adds performance overhead from shallow dependency comparisons and garbage collection memory allocations.

This article outlines the specific scenarios where these hooks are beneficial and when they should be avoided.

React 19 Official Release and Practical Features Guide

Wed, 05 Mar 2025 00:00:00 +0900

Introduction

React 19 represents a major paradigm shift for frontend development.

Features that were previously restricted to meta-frameworks like Next.js—such as React Server Components (RSC) and the Actions API for form handling—are now officially integrated into the stable core React library.

This guide highlights the most important features in React 19, offering practical code examples and upgrading tips to clean up your codebase.

1. Simplification of Async State with the Actions API

A standout feature in React 19 is the introduction of Actions, designed to simplify managing asynchronous mutations, loader overlays, and form submissions.

React Concurrent Features: Building Responsive UIs

Fri, 06 Dec 2024 00:00:00 +0900

React 18 introduced concurrent features that fundamentally change how rendering works. These features let React prepare multiple versions of the UI at once, interrupt work in progress, and prioritize urgent updates over non-urgent ones. The result is more responsive applications without giving up the declarative programming model that makes React productive.

Concurrency in React is not an all-or-nothing mode. Unlike the abandoned “Concurrent Mode” concept from earlier experimental builds, React 18+ makes concurrent features opt-in. You adopt them feature by feature, where they provide the most value. The underlying Fiber architecture makes this possible: React’s render phase can be paused and resumed, so the reconciler can switch between different units of work as priorities change.

React Portals: Advanced Patterns for Modals and Overlays

Tue, 03 Sep 2024 00:00:00 +0900

React portals solve a fundamental problem: DOM hierarchy constraints. A modal rendered inside a deeply nested component inherits its parent’s z-index stacking context and can be clipped by overflow: hidden. Portals let you render children into a different DOM node while preserving the React tree, so context, event handling, and component lifecycle all work as expected.

The key insight is the separation of DOM position from React tree position. A portal’s children are physically rendered elsewhere in the DOM, but events bubble through the React component hierarchy, not the DOM hierarchy. This mental model is essential for understanding all portal patterns.

React State Management in 2024: Choosing the Right Tool

Tue, 19 Mar 2024 00:00:00 +0900

By 2024, React’s state management landscape has matured to the point where choosing the right tool is a matter of understanding state categories rather than picking a winner. The core library provides useState and useReducer for local concerns, while the ecosystem offers specialized solutions for global UI state and server state. The key insight is that different categories of state benefit from different tools, and mixing them appropriately produces the most maintainable applications.

React Server Components: The Future of Web Rendering

Mon, 08 Jan 2024 00:00:00 +0900

React Server Components (RSC) represent a paradigm shift in how React applications render. Components run exclusively on the server, sending zero JavaScript to the client. This is not the same as Server-Side Rendering (SSR), which renders components on the server but still sends all the JavaScript for them to the client for hydration. RSC produces a special serialized format — the RSC payload — that the React reconciler on the client uses to reconstruct the component tree without executing the component code.