Is useEffect better for performance than changing a value directly in onChange?

If I have two select controls, one which is dependant on the other, so that if I change selectA value, selectB value will be selected depending on it:

...
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)}
      ...
    />
  </>
);

In terms of performance, would it be best to use useEffect or just change the selectB value on the selectA onChange method?

// 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?

I understand that useEffect can come handy for side effects that depend on data that can be updated at any time, but in this case I know the data right when I select it on selectA and it cannot be changed any other way, so I wonder if it’s necessary to make a useEffect to observe that value rather than just grabbing it and setting it directly.

Keep in mind that the value of selectA.potato can be of any type, but I’m thinking of it being an object.