就得用后面这段方案。否则的话，前面那个例子能跑通的原因也只是碰巧了，在于 每次因为其他 state 的变化导致的组件 rerender ，顺便更新了你的这个 useEffect 中的 conversation 。

如果你用前面的方式发现某次显示的 conversation 是旧数据，那么就是掉坑里了。

至于这个场景，我感觉可以试一下用 useMemo 。如果是要根据两个条件来筛选当前 active 的 conversation 或者类似的，那就
const activeConversation = useMemo(() => {
// 在这里面 map

}, [conversation, xxx_id, xxx_title]);

这样还能节约一次重绘，useEffect 那种 set 状态相当于 中括号里的变量变化一次重绘，useEffect 触发完因为 set 了 state 又触发一次重绘。useMemo 则可以是 一次绘制里面直接根据中括号里面的值，这一轮绘制就给变化的结果返回去。

react 的心智负担很大，往往对初学者不友好，首先，开发者理解的依赖和 react 需要的依赖是不一样的，你这个代码想在 currentChatId, currentChatTitle 变化时执行函数，但是每次函数更新时，conversation 因为在副作用引用了，也会更新，所以也需要监听，合理的办法确实是通过 setConversation 返回当前值进行更新

如果你连 currentChatId 都不想加，说明 currentChatId 本身是常量或者不更新的值，你应该使用 useMemo 包裹起来，避免重复计算

eslint 的规则不能关闭，他确实能反映依赖的问题，但是 ahooks 是必须使用的，作为 react 的 hooks 包装，能节省很多代码，另外你这个写法是不能够优化，currentChatTitle 在什么时候更新？初始化更新应该放在 useMount 上，事件触发应该放在函数里，这种情况的副作用不多见

set 函数可以传入一个函数作为参数，也很清晰啊，这个更新函数接受旧值，返回新值，而且还更安全。如果 set 函数传入值，获取到外面的旧的 conversation 怎么办，传入函数就没问题了

上面有人推荐使用 useMemo ，我不太建议，看起来你的这更新就是数组替换一下，这个渲染也不太复杂，没有必要缓存，缓存本身也是有成本的，无脑 useMemo 不是全是好处的，不考虑本身的成本，心智负担还变重了

@ooo4 如果不加这个 currentChatId 可以满足你的功能，非要用 useEffect 的话，可以考虑一下用 useReducer 组织状态

```typescript
import React, {useEffect, useReducer, useState} from "react"

type Conversation = {
id:string
title:string
[key:string]:unknown
}

const initialState:Conversation[] = [
{id:'1',title:"title-1"},
{id:'2',title:"title-2"},
{id:'3',title:"title-3"},
]

function App() {
const [currentChatId,setCurrentChatId] = useState("")
const [currentChatTitle,setCurrentChatTitle] = useState("")

const [conversation,setConversation] = useReducer<
React.Reducer<
Conversation[],
(prev:Conversation[],curChatId:typeof currentChatId)=>Conversation[]
>
>((prev,action)=>{
console.log(123)
return action(prev,currentChatId)
},initialState)

useEffect(()=>{
if(currentChatTitle){
setConversation((prev,curChatId)=>{
console.log({curChatId})
return prev.map(i=>{
return {
...i,
title: i.id === curChatId ? currentChatTitle : i.title,
}
})
})
}
},[currentChatTitle])

return <div>
<label htmlFor="currentChatId">currentChatId:</label>
<input type="text" id="currentChatId" value={currentChatId} onChange={(e)=>setCurrentChatId(e.target.value)} />
<label htmlFor="currentChatTitle">currentChatTitle:</label>
<input type="text" id="currentChatTitle" value={currentChatTitle} onChange={(e)=>setCurrentChatTitle(e.target.value)} />
<ul>
{
conversation.map(i=>{
return <li key={i.id}>{i.title}</li>
})
}
</ul>
</div>
}

export default App;

```

不一定要多用 useMemo ，但一定要少用 useEffect 。
见到很多 React 新人 useEffect 的时候，会创建很多多余的 state ，比如下面这种代码：

```
const [lightColor, setLightColor] = useState<'red' | 'yellow' | 'green'>('red');
const [canPass, setCanPass] = useState<boolean>(false);

useEffect(() => {
if (lightColor === 'green') setCanPass(true);
else setCanPass(false);
}, [lightColor]);
```

这里 canPass 不该是一个 state ，根本就是一个 computed value ，用 useMemo 才对：

```
const [lightColor, setLightColor] = useState<'red' | 'yellow' | 'green'>('red');
const canPass = useMemo(() => lightColor === 'green', [lightColor]);
```

大多数场合 useMemo 也是多余的，遇到性能问题再优化就可以：

```
canPass = lightColor === 'green';
```

所以我给 React 新人的建议都是：少用 useEffect ，如果遇到了必须 useEffect 的 case ，看看 ahooks 等库里有没有现成的 hook 。

21 楼的说得很不错。

不是所有的东西都需要做状态管理，如果数据量不大，你这个变量也不需要 memo ，直接 const 定义一个新变量即可。

另外补充一些：

1. 你可以一方面看官方文档，另外看下 Dan 的博客（ https://overreacted.io ），里面讲了很多“react 思维方式”

2. 对于初学者来说先不要不学 react19 的服务端组件，这个会麻烦一点（不过这个会逼着你重新思考状态管理，另一个角度是好事），你用 nextjs 可能会大量时间在这个上面踩坑，如果发现这个上面花费时间有点多的话，可以用 vite 创建项目去学习。

3. 对于官方文档有问题也可以直接直接提 issue 或者 pr ，有的时候可能是文档翻译得不好导致你理解出了偏差（中文仓库： https://github.com/reactjs/zh-hans.react.dev ）

啊没发现打错字了。

先不要学 react19 的服务端组件，这个心智负担太重了