打开任何一个 AI 辅助开发的 React 项目。你大概率会看到一样的画面：useMemouseCallbackReact.memo 铺天盖地，仿佛不写就会崩。

但 2026 年了React Compiler 已经正式落地。你手动写的那些“调整”，很多不但没用，还在拖慢你的代码。

先说为什么要改

React Compiler做了一件事：在编译阶段自动分析组件，在表达式级别做细粒度 memoization。

这代表着的观点是。你手写的 useMemo/useCallback/React.memo——编译器都能自动做，而且做得更细、更准确。按理说，

手动写的问题在于：

下面逐个看 5 个已经变成反模式的“调整”。

反模式 1：用 useMemo 包裹所有计算

最常见的 AI 生成代码模式：

function UserList {
const filteredUsers = useMemo => {
return users.filter);},)，const sortedUsers = useMemo => {
return .sort=>a.name.localeCompare);},)，const stats = useMemo => ({
total这方面。sortedUsers.length,active: sortedUsers.filter.length,}),);return 

{/* ... */}
}

A: TWO> THREE?看似分离，却多出了三段闭包，维护成本翻倍；可读性下降一半，每段都有自己的依赖数组，需要同步更新。

2026 年的新写法：

function UserList {
const sorted = users
.filter)
.sort=>a.name.localeCompare);const stats = {
从total来看，sorted.length。active: sorted.filter.length,};return 

{/* ... */}
}

B: A single pass guarantees compiler will memoize expression-level dependencies automatically.

从唯一例外来看，

• If you really have a heavy calculation and you prove it is a bottleneck with Profiler → keep {useMemo}. In all or scenarios it's noise.
• The compiler's automatic memoization already covers it.
• This rule applies only when profiling shows genuine slowdown.
• Avoid unnecessary manual memoization unless performance proves orwise.

反模式 2：用 useCallback 包裹所有传给子组件的函数

function Dashboard {
const = useState;const handleClick = useCallback=>{setCount;
},)，const handleReset = useCallback=>{setCount;},)，const handleExport = useCallback=>{exportData;},)，return (
<>



<>
);}
}


No real benefit unless children are wrapped in .

If no memoization at child level,this stable reference is wasted overhead.

The dependency array of {handleExport}。containing count,defeats purpose .

This pattern originates from outdated “best practice” training data—now it's just noise.


function Dashboard {
const = useState;return (
<>
setCount} />
setCount} />
exportData} />
);}
}


反模式 3：React.memo 包裹每个导出组件 


const UserCard = React.memo {
return (

onSelect}>

{user.name}

);})，


The compiler already performs fine-grained memoization at expression level—no need to wrap entire component.

A shallow prop comparison runs every render even if props rarely change—often costlier than rendering itself.

If you’re not using callbacks that depend on stable references,n Memos are redundant..


function UserCard {
return (

onSelect}>

{user.name}

);}
}


反模式 4：useEffect + useState 做数据获取 


function UserProfile {
const = useState;const = useState;const = useState;useEffect=>{
let cancelled=false;setLoading，fetchUser
.n(data=>{
if{ setUser;setLoading，}
})
.catch(err=>{
if{ setError;setLoading，}
});return=>{ cancelled=true };},)，if return;if return，return;}
}
``


Total ~25 行实现单一功能，却隐藏竞态条件、闪白屏、SSR 不友好等隐患。


// TanStack Query 示例
function UserProfile {
const {data:user。isPending,error}=useQuery({
queryKey:,queryFn=>fetchUser,});if return，if return;return，按理说，}
// 或者使用 React 19 的 `use`
function UserProfile {
const user=use;return，}

• 从 ~25 行到 ~3 行。按理说，自动处理竞态、缓存、去重与后台刷新。• **不是风格偏好，而是架构升级** —— 使用官方建议而非旧习惯。

反模式 5：过度拆分组件 “调整性能” 

I’ve seen a case where a single form page was split into **47** tiny components – one per input box,label。and validation message – claiming “avoid whole form re-render”. This misunderstanding stems from misreading how React reconciles trees.