React+Leva应用Render先于useEffect执行导致组件错误渲染问题

问题分析 #

核心问题是状态更新时机滞后：用户切换Leva选择器选项时，showResult状态无法在组件渲染前同步更新，导致组件先基于旧的true值错误渲染Result组件，之后才更新为false触发二次渲染显示错误提示，这种延迟在业务场景中可能引发崩溃。

解决方案 #

不要用独立的showResult状态存储判断结果，直接在渲染阶段实时计算是否显示Result组件，确保每次渲染都使用最新的选中项数据，彻底避免状态不同步问题。

修改后的代码示例 #

import { useControls } from "leva";
import Result from "./Result";

const items = [
  { name: "carrot", values: [1, 2, 3] },
  { name: "chicken", values: [4, 5, 6, 7, 8, 9] },
  { name: "apple", values: [10, 11] },
  { name: "banana", values: [12, 13, 14] }
];

export default function App() {
  const { item1, item2 } = useControls({
    item1: { options: items.map(i => i.name), value: "carrot" },
    item2: { options: items.map(i => i.name), value: "banana" }
  });

  const selectedItem1 = items.find(i => i.name === item1);
  const selectedItem2 = items.find(i => i.name === item2);

  // 实时计算是否满足显示Result的条件
  const shouldShowResult = selectedItem1.values.length === selectedItem2.values.length;

  return (
    <div className="App">
      {shouldShowResult ? (
        <Result values1={selectedItem1.values} values2={selectedItem2.values} />
      ) : (
        <p style={{ color: "red" }}>错误：两项的数值数组长度不一致！</p>
      )}
    </div>
  );
}

原理说明 #

1. 移除冗余状态：删除原有的showResult状态及对应的useEffect监听逻辑，消除异步更新带来的延迟。
2. 实时同步判断：在渲染时直接用最新的选中项数据计算长度是否相等，确保渲染内容与当前选择状态完全匹配。
3. 优化渲染性能：这种方式减少了一次因状态变化触发的重渲染，避免不必要的性能开销。

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