如何避免Zustand Store中不必要状态变更引发的组件重渲染？

你的核心问题是Zustand Store更新varA时，仅依赖varB的组件K却触发了不必要重渲染，甚至在开发环境下打印两次日志。下面是具体原因和解决方案：

最可能的根源：Store状态更新方式错误 #

Zustand要求状态更新必须返回新的不可变对象，如果直接修改原state对象，会导致Zustand认为整个Store状态发生变化，进而触发所有订阅组件的重渲染，不管组件依赖的是哪个变量。

修正更新逻辑 #

基础写法（非Immer）

确保更新varA时浅拷贝原状态，只修改目标属性：

import { create } from 'zustand'

const useStore = create((set) => ({
  varA: 0,
  varB: 0,
  updateVarA: (newVal) => set((state) => ({
    ...state, // 浅拷贝原状态
    varA: newVal // 仅更新需要修改的属性
  }))
}))

Immer写法（适合复杂状态）

使用zustand/immer可以直接修改状态，Immer会自动处理不可变性，避免手动拷贝：

import { create } from 'zustand/immer'

const useStore = create((set) => ({
  varA: 0,
  varB: 0,
  updateVarA: (newVal) => set((state) => {
    state.varA = newVal; // 直接修改，Immer自动生成新对象
  })
}))

其他可能的问题与处理 #

1. 选择器稳定性优化（可选） #

虽然内联选择器在多数场景下没问题，但可以用useCallback包裹选择器，确保其引用稳定，避免父组件重渲染时触发不必要的检测：

function K() {
  // 用useCallback固定选择器引用
  const selectVarB = React.useCallback((state) => state.varB, []);
  const varB = useStore(selectVarB);

  console.log("re-rendering component K...");

  return (
    <div>
      <p>Value of varB: {varB}</p>
    </div>
  );
}

2. 开发环境下的两次渲染 #

你看到的两次日志打印是React严格模式的正常行为，它会在开发环境下触发两次渲染，用来检测组件的不安全副作用。生产环境中只会渲染一次，无需额外处理；如果要在开发环境关闭，可移除根组件的<StrictMode>包裹。

3. 检查varB是否为引用类型 #

如果varB是对象/数组，需确保更新varA时没有意外修改varB的引用（比如不必要的深拷贝），否则Zustand的浅比较会认为varB发生变化，触发组件重渲染。

无效操作说明 #

你使用的useMemo无法解决问题，因为useMemo只是在组件已经重渲染时缓存计算值，不能阻止组件本身的重渲染。组件重渲染的根源是Store更新逻辑错误或选择器返回值变化，必须从这两点入手解决。

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