React useMemo初始渲染触发问题：如何仅响应用户手动下拉框变更？

要实现仅在用户手动更改下拉框选项时触发handleMyFieldChange，需要排除初始渲染阶段的两次触发（undefined和服务器返回的初始值），可以通过以下方式修改代码：

方法一：追踪初始值并比对变化 #

通过useRef记录服务器返回的初始有效值，仅当当前值与初始值不一致时执行回调：

const dropdownFld = watch(field.id); // 返回对象 {"text": "", "code": ""}
const initialDropdownValue = useRef(null);

// 组件挂载时记录服务器返回的初始有效值
useEffect(() => {
  if (dropdownFld?.code) {
    initialDropdownValue.current = dropdownFld;
  }
}, []);

useMemo(() => {
  // 仅当存在有效值，且与初始值不同时触发回调
  if (dropdownFld?.code && dropdownFld.code !== initialDropdownValue.current?.code) {
    handleMyFieldChange(field.id, valueFrom(dropdownFld));
  }
}, [dropdownFld]);

方法二：替换为更合适的useEffect #

useMemo初衷是缓存计算结果，执行副作用逻辑更推荐用useEffect，逻辑会更清晰：

const dropdownFld = watch(field.id);
const initialDropdownValue = useRef(null);

// 记录初始有效值
useEffect(() => {
  if (dropdownFld?.code) {
    initialDropdownValue.current = dropdownFld;
  }
}, []);

// 仅在用户修改时触发回调
useEffect(() => {
  if (dropdownFld?.code && dropdownFld.code !== initialDropdownValue.current?.code) {
    handleMyFieldChange(field.id, valueFrom(dropdownFld));
  }
}, [dropdownFld]);

这两种方案都会跳过初始渲染时的undefined和服务器初始值触发，仅响应用户手动修改的选项变化。

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