Reactjs React 使用 useEffect 还是直接在 onChange 方法中更改值对性能最好

如果我有两个 Select 控件，其中一个依赖于另一个，因此如果我更改selectA值，则将根据它 Select 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还是只更改selectA onChange方法的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);
  }}
  ...
/>

Does it matter at all? Is there any difference in terms of performance between both?个

我知道，useEffect对于依赖于可以随时更新的数据的副作用很方便，但在这种情况下，当我在selectA上 Select 它时，我知道数据是正确的，它不能以任何其他方式更改，所以我想知道是否有必要用useEffect来观察那个值，而不是直接抓住它并设置它.

请记住，selectA.potato的值可以是任何类型的，但我认为它是一个对象.