⌘K

Change language Switch ThemeSign In

Narrow Mode

React Development Practices: Why You Should Ban useEffect in Your Projects

React Development Practices: Why You Should Ban useEffect in Your Projects

@vikingmute

特别棒的技术文章- 《Why we banned React's useEffect 》作者的团队在项目中 禁止直接使用 useEffect，好久没看到这么和 AI 没有关系的技术文章了，浏览量也非常高。

useEffect 常被滥用，无限循环以及 deps hell 经常出现。

它们的解决方案是：

* 使用派生状态

* 使用 React Query、RTK Query、SWR 取代手写 fetch + setState

* 用户点击、表单提交等直接在 handler 里做，不用 state flag + effect 间接触

* useMountEffect 做一次性外部同步，本质上是 useEffect(..., []) 的命名封装

* 当 ID/prop 变化时需要“全新状态”，直接用 让 React remount，而不是 effect 清状态。

目的是：强制更干净的组件树设计：父组件负责协调，子组件更简单，他们通过 lint 规则 + AGENTS.md 强制执行。

规则可以看这个 gist： gist.github.com/alvinsng/5dd68…

大家可以尝试在 React 项目中使用下。Show More

!Image 3: Alvin Sng

#### Alvin Sng

@alvinsng · 2d ago x.com/i/article/2028…

143

463

5,046

1.9M

Mar 19, 2026, 6:37 AM View on X

2 Replies

0 Retweets

28 Likes

3,424 Views V Viking @vikingmute

One Sentence Summary

This tweet summarizes best practices for banning useEffect in React projects, providing concrete alternatives and references to Lint rules.

Summary

This tweet highlights a technical perspective on why one should ban useEffect in React projects. Addressing common pitfalls such as infinite loops and "dependency hell," the tweet outlines key alternatives: using derived state, data fetching libraries like React Query, RTK Query, and SWR, handling logic directly within event handlers, using useMountEffect for synchronization, and leveraging the key prop to force component remounting. These practices aim to enforce a cleaner component tree design and are recommended for implementation via Lint rules, with a practical Gist provided for reference.

AI Score

82

Influence Score 9

Published At Today

Language

Chinese

Tags

React

useEffect

Front-end Development

Best Practices

Code Quality HomeArticlesPodcastsVideosTweets

React Development Practices: Why You Should Ban useEffect...