React自定义Hook useColorScheme返回值在引用文件中未同步更新问题

问题根因与修复方案 #

你遇到的问题核心是自定义Hook的状态更新没有正确传递到调用组件，按优先级排查修复即可：

1. 修复useLocalstorage的类型转换逻辑（最高概率）

localStorage仅支持存储字符串类型，如果你直接存储布尔值，读取时会得到"true"/"false"的字符串值，触发你useMemo中typeof isDarkMode !== 'boolean'的判断，导致value始终跟随系统主题systemPrefersDark，若系统主题无变化，外层组件感知不到value变更。
请调整useLocalstorage的实现，读取时做布尔值转换：

const useLocalstorage = (key, defaultValue) => {
  const [state, setState] = useState(() => {
    const storedVal = localStorage.getItem(key);
    if (storedVal === null) return defaultValue;
    // 布尔值特殊转换
    if (storedVal === 'true') return true;
    if (storedVal === 'false') return false;
    return storedVal;
  });

  const updateState = (newVal) => {
    setState(newVal);
    localStorage.setItem(key, String(newVal));
  };
  return [state, updateState];
};

同时确认调用setIsDarkMode时传入的是布尔值，而非字符串、事件对象等其他类型。

2. 缓存自定义Hook返回值

自定义Hook每次执行时都会生成新的返回数组，虽然你解构的是基础类型的value，但为了避免浅比较异常，建议用useMemo缓存返回值，修改useColorScheme的返回逻辑：

// 原有逻辑不变
return useMemo(() => [value, setIsDarkMode], [value, setIsDarkMode]);

3. 排查调用组件逻辑

确认调用useColorScheme的组件没有被React.memo异常拦截重渲染，也没有在运行过程中被卸载。

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