React中当一个状态可完全决定另一个时，使用双状态是否属于反模式？

假设项目里用户需要完成6个步骤，若在第3步选择Option B而非Option A，则第4、5步会被跳过。我尝试了几种实现方式：

方式1：双状态直接更新 #

const [isOptionBChosen, setIsOptionBChosen] = useState(false);
const [steps, setSteps] = useState(['step1', 'step2', 'step3', 'step4', 'step5', 'step6']);

// 第3步选择框的 onChange 逻辑
onChange={v => {
  setSteps(
    v === "optionA" ? 
      ['step1', 'step2', 'step3', 'step4', 'step5', 'step6'] : 
      ['step1', 'step2', 'step3', 'step6']
  );
  setIsOptionBChosen(v === "optionB");
}}

方式2：派生计算（非状态） #

const [isOptionBChosen, setIsOptionBChosen] = useState(false);
// steps 由 isOptionBChosen 直接计算，不是独立状态
const steps = isOptionBChosen ? 
  ['step1', 'step2', 'step3', 'step6'] :
  ['step1', 'step2', 'step3', 'step4', 'step5', 'step6'];

方式3：用 useEffect 同步双状态 #

const [isOptionBChosen, setIsOptionBChosen] = useState(false);
const [steps, setSteps] = useState(['step1', 'step2', 'step3', 'step4', 'step5', 'step6']);

useEffect(() => {
  setSteps(
    isOptionBChosen ? 
      ['step1', 'step2', 'step3', 'step6'] : 
      ['step1', 'step2', 'step3', 'step4', 'step5', 'step6']
  );
}, [isOptionBChosen]);

请问：当一个状态可完全决定另一个状态时，使用双状态是否属于反模式？

这种双状态的写法属于反模式，不推荐使用，原因如下：

1. 易引发状态不一致
   如果后续修改逻辑时，只更新了isOptionBChosen却忘了同步steps，或者反过来操作，就会出现状态不匹配的bug，这类问题排查起来非常耗时。

2. 增加维护成本
   每次依赖逻辑变化时，需要同时维护两个状态的更新规则，代码复杂度会随着逻辑迭代不断上升。

3. 违背React状态设计原则
   React鼓励最小化状态集合，只保留无法通过其他状态/Props计算得出的核心状态。派生状态应当通过计算得到，而非存为独立状态——这能保证状态的唯一可信源，避免冗余。

推荐实现方案 #

场景1：逻辑简单的派生计算

直接通过核心状态计算派生值，写法简洁且无冗余：

const [isOptionBChosen, setIsOptionBChosen] = useState(false);
const steps = isOptionBChosen ? 
  ['step1', 'step2', 'step3', 'step6'] :
  ['step1', 'step2', 'step3', 'step4', 'step5', 'step6'];

场景2：复杂逻辑的派生计算

如果派生逻辑需要map/filter等复杂操作，用useMemo缓存计算结果，避免每次渲染重复计算：

const [isOptionBChosen, setIsOptionBChosen] = useState(false);
const steps = useMemo(() => {
  const baseSteps = ['step1', 'step2', 'step3', 'step4', 'step5', 'step6'];
  return isOptionBChosen ? baseSteps.filter(step => !['step4', 'step5'].includes(step)) : baseSteps;
}, [isOptionBChosen]);

绝对避免的写法

不要用useEffect同步双状态——这种写法不仅冗余，还可能因React批量更新机制导致状态更新延迟，出现短暂的不一致，完全没必要。

核心总结 #

始终遵循只保留必要核心状态的原则，派生状态通过计算得到，这样代码更简洁、可靠，维护成本更低。

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