State

ELI5 — The Vibe Check

State is a component's memory — data that can change over time and causes the UI to update when it does. Think of a counter: the number is state. When it changes, the screen updates automatically. Without state your app is just a static poster.

Real Talk

State is mutable data managed by a component or store that, when changed, triggers a re-render. Local state lives inside a component (useState in React, ref/reactive in Vue). Global state is shared across components via stores like Pinia, Redux, or Zustand.

Show Me The Code

// React
import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

When You'll Hear This

"The modal's open/closed is local state — don't put it in the global store." / "When the state updates the component re-renders."