如果我有两个选择控件，一个依赖于另一个，所以如果我改变selectA值，selectB值将根据它被选择：

...
const [values, setValues] = useState({ selectA: undefined, selectB: undefined });
const setSelectValue = (field, value) => {
  setValues((current) => {...current, [field]: value});
}

return (
  <>
    <Select
      name="selectA"
      value={values.selectA}
      onChange={(val) => setSelectValue('selectA', val)}
      ...
    />
    <Select
      name="selectB"
      value={values.selectB}
      onChange={(val) => setSelectValue('selectB', val)}
      ...
    />
  </>
);

在性能方面，最好使用useEffect，还是只更改selectAonChange方法上的selectB值？

// Is it best to use useEffect
useEffect(() => {
  setSelectValue('selectB', values.selectA.potato);
}, [values.selectA]);

// ... or is it best to change it directly on onChange method?
<Select
  name="selectA"
  value={values.selectA}
  onChange={(val) => {
    setSelectValue('selectA', val);
    setSelectValue('selectB', val.potato);
  }}
  ...
/>

”””这一切都重要吗？两者在性能上有什么区别吗？**
我知道useEffect可以方便地处理依赖于可以随时更新的数据的副作用，但是在这种情况下，当我在selectA上选择它时，我知道数据是正确的，并且不能以任何其他方式更改，所以我想知道是否有必要制作一个useEffect来观察该值，而不是直接获取它并设置它。
请记住，selectA.potato的值可以是任何类型，但我认为它是一个对象。