React新手求助：useEffect缺失依赖currentNoteId，添加后会崩溃吗？

结论先行 #

不会崩溃，直接把currentNoteId加入依赖数组是安全的，甚至是符合React规范的做法。

为什么会出现这个警告？ #

ESLint的react-hooks/exhaustive-deps规则要求：useEffect内部用到的所有外部变量都必须加入依赖数组。你的effect里判断了!currentNoteId，但没把它加入依赖，React无法追踪这个变量的变化，可能导致effect使用的是旧的currentNoteId值（闭包陷阱）。

比如：如果后续有其他逻辑把currentNoteId重置为空，此时notes已经有数据，但因为没加currentNoteId到依赖，effect不会重新执行，就无法自动把notes[0].id设为新的currentNoteId。

添加依赖后的逻辑分析 #

修改后的代码如下：

const [notes, setNotes] = useState([]);
const [currentNoteId, setCurrentNoteId] = useState("");

useEffect(() => {
  if (!currentNoteId) {
    setCurrentNoteId(notes[0]?.id);
  }
}, [notes, currentNoteId]);

当notes或currentNoteId变化时，effect会重新执行：

1. 初始状态：currentNoteId为空，notes如果有数据，会把notes[0].id赋值给currentNoteId
2. currentNoteId更新后，再次触发effect，但此时currentNoteId已有值，不会执行setCurrentNoteId，因此不会陷入无限循环
3. 如果后续notes更新，或者currentNoteId被重置为空，effect会再次触发，确保currentNoteId在空值时自动取最新notes的第一个id

额外优化方案（可选） #

如果不想在依赖数组里加currentNoteId，可以用useRef追踪是否已经设置过currentNoteId，避免重复执行：

const [notes, setNotes] = useState([]);
const [currentNoteId, setCurrentNoteId] = useState("");
const isNoteIdSet = useRef(false);

useEffect(() => {
  if (!isNoteIdSet.current && notes.length > 0) {
    setCurrentNoteId(notes[0].id);
    isNoteIdSet.current = true;
  }
}, [notes]);

这个方案适合只需要在notes首次加载时设置一次currentNoteId的场景，但新手优先推荐第一种直接添加依赖的写法，更符合React Hooks的设计思路。

内容的提问来源于stack exchange，提问作者Ahmad Maartmesrini