Managing state without headaches

State is the soul of your UI, and the source of most bugs. Over time, managing state can become a tangled mess. But it doesn’t have to. Here’s how I manage state in React apps without headaches.

Start local, stay local

Avoid global state by default. Most state only matters within a single component or feature.

Use:

• useState for local UI
• useReducer for complex local flows
• useRef for mutable non-UI state (timeouts, etc.)

Don’t reach for context or a state library unless it truly spans multiple layers or domains.

Embrace colocation

Keep state close to where it’s used. Don’t lift state just in case, wait until it’s needed elsewhere.

Example:

// Good
<Form>
  <StepOne />
  <StepTwo />
</Form>
 
// Bad
const [stepOneState, setStepOneState] = useState(...)
const [stepTwoState, setStepTwoState] = useState(...)