React useState中基于isActive更新hasActivatedOnce的高效实现方案咨询

最优方案：自定义封装Hook（零多余渲染、逻辑内聚） #

直接将两个关联状态合并管理，从根源上保证单次更新触发一次重渲染，且内置hasActivatedOnce一旦为true就永不回退的逻辑：

import { useState } from 'react';

const useActivationState = (initialIsActive = false) => {
  // 合并为单个状态，保证每次更新只会触发一次重渲染
  const [state, setState] = useState({
    isActive: initialIsActive,
    hasActivatedOnce: initialIsActive
  });

  const setIsActive = (newIsActive) => {
    setState(prev => {
      // 新状态为true时，同时把hasActivatedOnce设为true且后续不可回退
      if (newIsActive) {
        return { isActive: true, hasActivatedOnce: true };
      }
      // 新状态为false时，仅修改isActive，保留hasActivatedOnce的原有值
      return { ...prev, isActive: false };
    });
  };

  return [state.isActive, state.hasActivatedOnce, setIsActive];
}

使用方式和原生useState一致：

const [isActive, hasActivatedOnce, setIsActive] = useActivationState(false);

轻量方案：同上下文批量更新 #

如果不想单独封装Hook，也可以在触发isActive更新的逻辑中同步修改hasActivatedOnce，React18及以上版本会自动把同一事件回调、同步上下文里的多次setState合并为一次渲染，不会有多余重渲染：

const [isActive, setIsActive] = useState(false);
const [hasActivatedOnce, setHasActivatedOnce] = useState(false);

// 示例：hover触发激活的回调
const handleMouseEnter = () => {
  setIsActive(true);
  // 函数式更新保证拿到最新的prev状态，避免闭包问题
  setHasActivatedOnce(prev => prev || true);
};

注意事项 #

• React17及更早版本中，异步回调（setTimeout、Promise.then等）里的多次setState不会自动批处理，这种场景优先用上面的合并状态方案，避免出现两次渲染。
• 不要用useEffect监听isActive变化来更新hasActivatedOnce：useEffect在渲染完成后才执行，会导致isActive变true→第一次渲染→执行effect改状态→第二次渲染的多余渲染流程，不符合性能要求。

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