Local state management

Local state is mutable data that belongs to a single component instance. It's the component's private memory.

Why local state needs to be scoped?

  • Isolation, Separation of Concerns — to separate UI concerns from business logic
  • Encapsulation and Reusability — to have independent state in each instance
  • Performance and Optimization — allows frameworks to optimize efficiently

Use local state for anything that affects one instance of the component (form input values, toggle states). Use shared/global state for data that multiple components genuinely need to access (user authentication, theme settings).

Difference of implementation

Logo of react React 19, Functional components

React uses an explicit, functional state model. Use setter function to change the value.

Logo of vue Vue 3.5, Composition API

Vue uses a Proxy-based reactivity system that automatically detects when you access or modify data. When you declare state with ref(), Vue wraps your data in a Proxy that intercepts reads and writes.

Non-reactive state

If data is not changed during component lifecycle — keep it non-reactive.

Logo of react React 19, Functional components
Logo of vue Vue 3.5, Composition API

If you have full control over a variable — no need to make it reactive.

Logo of react React 19, Functional components
Logo of vue Vue 3.5, Composition API

Reactive state

Logo of react React 19, Functional components

React requires you to call the setter function: setValue(newValue). This function call triggers an asynchronous re-render of the component. You must pass a new value rather than mutating the existing one. Updating state doesn't immediately change the variable — you'll still see the old value until the next render completes.

Logo of vue Vue 3.5, Composition API

ref() uses a .value property to change the value of the state. ref() is deep reactivity by default.

Vue automatically unwraps refs — so, you can use {{ count }} instead of {{ count.value }} in <template>

Two-way binding

Logo of react React 19, Functional components

You store the input value in state using useState(). You set the input's value attribute to this state value. You add an onChange handler that captures the new value and updates state via setState().

The cycle: input changes → onChange fires → state updates → component re-renders → input displays new value.

You can add validation, transformation, or formatting in the onChange handler before updating state.

React also supports uncontrolled components using useRef(), where the DOM element maintains its own value and React doesn't control it. This approach has no two-way binding — React only reads the value when you explicitly call the ref.

Logo of vue Vue 3.5, Composition API

Vue provides v-model as a dedicated syntax for two-way binding. Instead of writing separate value prop and @input event listener, you write <input v-model="count">.

v-model works on form elements (input, textarea, select) and custom Vue components.

When you create custom components, you can implement v-model support by accepting a modelValue prop and emitting an update:modelValue event.

There is possible to have multiple v-models.