React Performance Best Practices

1/14/2026

This post introduces the 'react-best-practices' repository, a new capability that consolidates over 10 years of React and Next.js optimization knowledge into a structured format for AI agents. It details the core idea of prioritizing performance fixes by addressing waterfalls and bundle size first, followed by server-side performance, client-side fetching, and re-render optimization. The post outlines eight performance categories and provides examples of common performance anti-patterns and their solutions, such as optimizing async work and reducing JavaScript payload. It also highlights the integration of these best practices into AI coding agents for automated code review and refactoring.

7/25/2023

Introduced `react-tweet`, a new React component for embedding tweets. It offers a 35x reduction in client-side JavaScript compared to native Twitter embeds, supports React Server Components, and includes built-in data fetching and caching. This component aims to improve embed performance by avoiding iframes and reducing layout shift.

7/19/2023

This post explains how React 18's concurrent features (Transitions, Suspense, React Server Components) improve application performance by addressing the issue of long tasks on the main thread. It details the concepts of the main thread, long tasks, Total Blocking Time (TBT), and Interaction to Next Paint (INP). It contrasts traditional synchronous React rendering with the new concurrent renderer, which allows for non-urgent renders to be interrupted and resumed, leading to a more responsive UI. The post includes a demo illustrating the performance impact of synchronous rendering and how concurrent features mitigate it.

1/19/2023

Introduced React Wrap Balancer, a library that improves text readability by minimizing content wrapper width to prevent single words on the last line of text. It employs a binary search algorithm for efficient text balancing and supports React Server Components and Next.js 13 app directory. The post also details strategies for solving layout shift issues and handling dynamic resizing using ResizeObserver.

9/30/2022

This post details how to improve the accessibility of Next.js sites by increasing element target size, building with semantic HTML using ARIA patterns, providing descriptive alternative text for images, and implementing accessible input error messages using `role="alert"` and `aria-atomic="true"`.