React中如何避免状态更新时无关兄弟组件不必要重渲染？

我正在开发一套React组件结构，父组件<MyComponent>接收三个状态值，另有三个独立的控制器组件，每个组件初始化时传入其中一个状态值及其setter函数。

以下是简化后的代码：

// Parent Component
<MyComponent
  input_a={A}
  input_b={B}
  input_c={C}
/>

// State declarations
const [A, setA] = useState(1);
const [B, setB] = useState(1);
const [C, setC] = useState(1);

// Controller Components
<ElementA
  initial={A}
  setter={setA}
/>
<ElementB
  initial={B}
  setter={setB}
/>
<ElementC
  initial={C}
  setter={setC}
/>

在此结构中，当我更新一个状态值（例如调用setA）时，三个控制器组件（ElementA、ElementB、ElementC）都会重渲染——尽管只有与更新状态关联的组件应受影响。状态值作为控制器组件的初始值，后续更新理论上仅应影响<MyComponent>。

我曾考虑使用memoization（如React.memo），但未达到预期效果。我正在寻找无需依赖memoization的替代方案或最佳实践，以重构或优化代码，使仅对应更新状态的组件重渲染。

更新：
感谢各位的解答与建议。我最终决定使用MobX管理状态，这让我的开发工作轻松了许多。
我也意识到之前错误地使用了memoization，但即使修正后，仍发现动画存在卡顿现象。

内容的提问来源于stack exchange，提问作者Антон Пименов