请教一个关于 useEffect 依赖的问题

最近在学习 react 和 nextjs ，算初学者，感觉我写的很多 useEffect eslint 都提示缺少依赖，但其实我觉得写的依赖已经够了

比如这样

  const [conversation, setConversation] = useState<Conversation[]>([])
  useEffect(() => {
    if (currentChatTitle) {
      setConversation(
        conversation.map((i) => {
          return {
            ...i,
            title: i.id === currentChatId ? currentChatTitle : i.title,
          }
        })
      )
    }
  }, [currentChatId, currentChatTitle])

eslint 就说缺少conversation这个依赖，但是加了之后就无限执行这个 useEffect 回调了，其实我连这个currentChatId都不想加入依赖

eslint 也给了解决方案就是改成setXXX((prev)=>xxx)，但这样好麻烦啊，或者就是 disable 掉这一行

  useEffect(() => {
    if (currentChatTitle) {
      // 改成`setXXX((prev)=>xxx)`
      setConversation((conversation) =>
        conversation.map((i) => {
          return {
            ...i,
            title: i.id === currentChatId ? currentChatTitle : i.title,
          }
        })
      )
    }
  }, [currentChatId, currentChatTitle])

请问下各位平时会关掉这个eslintreact-hooks/exhaustive-deps这个规则吗

ZztGqk

204 天前

react 的去年由 Dan 更新的新 doc 很详细的说，https://react.dev/learn/you-might-not-need-an-effect ，很多时候你只是需要一个新的值，而不是修改一个已有的值，由于 function 会被执行多次，所以这个概念相对常见，甚至在某些轻度转换的情况无需 memo ，至于使用 memo 或者 callback 来存值的概念我觉得更像 vue3 或者 solid 那种只执行一次的概念，更像是 computed 。不使用 memo 直接 const 一个新的值可以配合 react compiler 来帮你完成这种包装。另外随着项目的增长你可以需要 Jotai 或者别的状态库，我觉得从 SPA （直接使用 vite + react router （非 Remix 版本，这里有点混乱，去年 Remix 和 React Router 合并了，导致现在 v7 有些部分为了支持 Server Componet 变得不再纯粹，可以参考 v6 的文档逐步过渡）过渡到 SSR 学习曲线会稍微舒服一些，毕竟我觉得 next 里的 server Compoent 的概念会阻碍初学者对于状态管理的认知...

loveloki32

201 天前

21 楼的说得很不错。

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

另外补充一些：

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

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

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