Frontend · React.js · AI Programming

Five React Performance Patterns That Are Now Anti-Patterns in 2026

By kyriewen · Jul 20, 2026

Read original on juejin.cn ↗ Google Translate ↗ Alt translation

React codebases are littered with manual memoization that AI coding assistants keep generating from outdated training data. Leaving those patterns in place increases bundle size, slows renders through unnecessary shallow comparisons, and makes code harder to read and maintain — all for optimizations the compiler now handles better.

Summary

With the React Compiler now performing automatic, expression-level memoization at build time, the manual memoization patterns that dominated React codebases for years have become anti-patterns. Wrapping every calculation in useMemo, every callback in useCallback, and every component in React.memo adds maintenance overhead, memory cost, and clutter without the performance gains the compiler already provides. The same shift applies to data fetching: useEffect plus useState for server requests is officially discouraged in favor of TanStack Query or React 19's `use` hook, which handle caching, race conditions, and deduplication automatically. Over-splitting components to avoid re-renders is another common mistake that increases reconciliation work rather than reducing it; the real lever is state co-location. The rule of thumb is now simple: profile first, and delete any optimization the profiler cannot justify.

Takeaways

— React Compiler memoizes at the expression level during compilation, making manual useMemo, useCallback, and React.memo largely unnecessary.

— ESLint React v5.3 ships with rules that flag unnecessary useMemo and useCallback calls.

— useCallback does not prevent child re-renders unless paired with React.memo, and even then the compiler can skip work more precisely.

— React.memo adds a shallow comparison cost on every render; for lightweight components that cost often outweighs the benefit.

— useEffect plus useState for data fetching introduces race conditions, waterfall requests, and missing caching — TanStack Query or React 19's `use` hook eliminate all three.

— Over-splitting components to avoid re-renders increases Fiber nodes and reconciliation work; state co-location is the correct performance lever.

— The only valid reason to keep manual memoization is a profiler-confirmed bottleneck on genuinely expensive computations.

Conclusions

AI coding assistants are perpetuating obsolete React patterns because their training data is frozen in the 2020–2024 era before the compiler existed.

The shift from manual memoization to compiler-driven optimization changes the developer's job from writing cache guards to deleting them during code review.

React.memo becomes a net negative when the cost of a shallow props comparison exceeds the cost of re-rendering a simple component — a threshold many teams never measure.

State co-location is a more impactful performance strategy than component splitting, yet it is rarely taught as the primary alternative to useMemo and React.memo.

Concepts & terms

React Compiler

A build-time tool released with React 19 that automatically analyzes components and inserts fine-grained memoization at the expression level, removing the need for manual useMemo, useCallback, and React.memo in most cases.

State co-location

The practice of placing state in the lowest component that actually needs it, rather than lifting state to a parent and then splitting components to avoid re-renders. It reduces unnecessary prop drilling and reconciliation work.

TanStack Query

A data-fetching library (formerly React Query) that handles caching, background refetching, deduplication, and race-condition management, replacing the manual useEffect-plus-useState pattern for server state.

Source: juejin.cn ↗ Google Translate ↗ Backup ↗