React中状态变更时如何避免函数被重复调用两次？

你遇到的问题根源是filter变更会触发组件两次渲染：第一次是filter本身更新导致组件渲染，此时value还是旧值；第二次是useEffect里调用setValue更新value，又触发一次渲染，所以getReports会执行两次。

解决方案：用useMemo替代状态同步 #

既然value是完全由filter计算出来的派生值，根本不需要把它存成独立状态，用useMemo直接在渲染阶段计算最新值即可，这样filter变更时组件只会渲染一次，getReports也只会执行一次。

修改后的代码：

const [filter, setFilter] = useState(valueFromProps);

// 根据filter计算派生值，依赖filter变化时重新计算
const value = useMemo(() => {
  return calculateNewValue(filter);
}, [filter]);

const getReports = (value) => {
  console.log(value);
  // generate some html
};

return (
  <>
    <div>
      {getReports(value)}
    </div>
  </>
);

补充说明 #

1. 原代码里的setvalue是笔误，应该是setValue，建议修正避免潜在问题；
2. useMemo会缓存计算结果，只有当依赖项（这里是filter）变化时才会重新计算，既避免了不必要的重复计算，也保证了value和filter的同步性，组件一次渲染就能拿到最新值，不会触发二次渲染。

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