Are We Overcomplicating React State? A Look at Valtio

Are We Overcomplicating React State? A Look at Valtio

我们是否把 React 状态管理搞得太复杂了?浅谈 Valtio

React state management often feels more complex than it needs to be. Selectors, memoization, dependency arrays… we spend a lot of time managing how state updates, not just what the state is. Recently, I tried Valtio — and it made me rethink some of these patterns. React 的状态管理往往比预想的要复杂得多。选择器(Selectors)、记忆化(Memoization)、依赖数组……我们花费了大量时间去管理“状态如何更新”,而不仅仅是“状态本身是什么”。最近,我尝试了 Valtio,它让我重新思考了其中一些模式。

The usual problem

常见的问题

In many React setups, especially as apps grow, state logic tends to spread: UI state and business state get mixed, we add selectors to control updates, we optimize re-renders manually, we introduce more abstraction to keep things under control. It works — but it requires constant orchestration. 在许多 React 项目中,尤其是随着应用规模的扩大,状态逻辑往往会变得分散:UI 状态和业务状态混杂在一起,我们添加选择器来控制更新,手动优化重新渲染,并引入更多的抽象来保持控制。这确实有效,但需要不断的协调和维护。

What felt different with Valtio

Valtio 的不同之处

Valtio takes a different approach based on proxies. Instead of thinking in terms of update triggers and subscriptions, you work directly with state: Valtio 采用了一种基于 Proxy(代理)的不同方法。你不再需要考虑更新触发器和订阅,而是直接操作状态:

import { proxy } from 'valtio';
const state = proxy({ count: 0 });
function increment() {
  state.count++;
}

In a component: 在组件中:

import { useSnapshot } from 'valtio';
function Counter() {
  const snap = useSnapshot(state);
  return <button onClick={() => state.count++}>{snap.count}</button>;
}

That’s it. No selectors, no dependency arrays, minimal boilerplate. 就是这样。没有选择器,没有依赖数组,几乎没有样板代码。

Why this matters

为什么这很重要

The real benefit isn’t “less code”. It’s less mental overhead. With this model: you don’t think about when to re-render, you don’t orchestrate updates manually, you focus on state, not the mechanics around it. It feels more reactive than controlled. 真正的优势不在于“代码更少”,而在于“心智负担更小”。在这种模式下:你无需考虑何时重新渲染,无需手动协调更新,你只需专注于状态本身,而不是围绕它的机制。它感觉更像是“响应式”的,而不是“受控”的。

But this doesn’t remove complexity

但这并没有消除复杂性

To be clear: complexity doesn’t disappear. In real-world apps, especially with dynamic forms, derived state, and async flows, you still need structure. But shifting complexity away from orchestration makes things easier to reason about. 需要明确的是:复杂性并没有消失。在现实世界的应用中,特别是在处理动态表单、派生状态和异步流时,你仍然需要结构。但将复杂性从“协调机制”中剥离出来,会让逻辑更容易理解。

Where this gets interesting

有趣之处

This approach becomes even more relevant in areas like: complex forms (React Hook Form, MUI, etc.), dynamic UIs with dependencies between fields, and state that evolves frequently during development. That’s usually where traditional patterns start to show their limits. 这种方法在以下领域尤为适用:复杂表单(如 React Hook Form、MUI 等)、字段间存在依赖关系的动态 UI,以及在开发过程中频繁演变的状态。这通常是传统模式开始显现局限性的地方。

Final thought

结语

Valtio won’t replace every state management solution. But it challenges an important assumption: Are we managing state… or managing the complexity around it? Curious how others are approaching state management lately. Valtio 不会取代所有的状态管理方案,但它挑战了一个重要的假设:我们到底是在管理状态……还是在管理围绕状态产生的复杂性?很好奇大家最近是如何处理状态管理的。