求React Hooks实现代码反馈：setState与useEffect用法合理性校验

现有代码存在的问题 #

你的写法确实不合理，属于完全冗余的错误实现，具体问题如下：

• 无意义的setCommand调用：你给setCommand传入的更新函数最终返回的是当前作用域下的command值，本质上没有修改command状态，这层封装没有任何实际作用。
• useEffect未指定依赖数组：没有依赖数组的useEffect会在每次组件渲染完成后都执行，哪怕相关依赖没有变化，会产生很多不必要的执行开销。
• 逻辑判断存在闭包问题：更新函数内的command是当前渲染闭包捕获的旧值，和prevCommand的比较逻辑本身就不符合预期，无法正确响应状态变化。

关于死循环的疑问 #

你现有代码大概率不会触发无限循环，因为setCommand最终返回的command值和原有状态完全一致，React对基础类型状态做浅比较后会跳过重渲染，因此不会反复调度useEffect。但这种写法完全不符合React设计范式，属于可运行但不可维护的错误代码，后续只要改动返回值就可能触发死循环。

正确实现方案 #

你要实现的需求是command或allowedTags变化时，自动同步计算items的值，完全不需要绕一层setCommand，根据场景可以选择两种更合理的写法：

方案1：使用useMemo（优先推荐）

如果syncFunc是无副作用的纯函数，且items不需要独立于command修改，直接用useMemo缓存计算结果即可，不需要单独维护items状态，性能更好：

import { useState, useMemo } from 'react';

export default function Comp(props) {
  const [command, setCommand] = useState("");
  // 依赖变化时自动重新计算items
  const items = useMemo(() => syncFunc(allowedTags, command), [allowedTags, command]);
    
  // 其余组件逻辑
}

方案2：使用带正确依赖的useEffect

如果后续需要独立修改items的值，可以保留items状态，给useEffect明确指定依赖即可：

import { useState, useEffect } from 'react';

export default function Comp(props) {
  const [command, setCommand] = useState("");
  const [items, setItems] = useState(allowedTags);
    
  useEffect(() => {
    const newItems = syncFunc(allowedTags, command);
    setItems(newItems);
  }, [command, allowedTags]); // 仅依赖变化时才执行更新
    
  // 其余组件逻辑
}

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