---
description: 
globs: *.tsx,*.jsx
alwaysApply: false
---
---
id: prefer-useReducer-over-useState
title: Prefer useReducer instead of useState
description: Encourages using useReducer for more scalable state management in React components.
globs:
  - "**/*.tsx"
  - "**/*.jsx"
language: javascript
severity: warning
---

## 💡 Prefer `useReducer` over multiple `useState` hooks

When managing multiple state properties in a React component, it is clearer and more scalable to use `useReducer` instead of several `useState` calls.

### 🚫 Example with `useState` (not recommended)

```tsx
const [message, setMessage] = useState("");
const [tags, setTags] = useState([]);
const [status, setStatus] = useState("active");
```

### ✅ Example with `useReducer` (recommended)

```tsx
const [state, updateState] = useReducer(
  (state, partialState) => ({
    ...state,
    ...partialState,
  }),
  { message: "", tags: [], status: "active" }
);
```

This allows updating multiple properties in a cleaner way:

```tsx
onChange={(e) => {
  updateState({ message: e.target.value });
}}
```

---

### 🤔 Why?

- Groups related state into a single object.
- Makes it easier to update multiple values.
- Keeps state logic predictable and scalable.

---

### 📌 When to apply this rule

- When your component uses more than one `useState`.
- When state values are conceptually related.
- When you expect the component's state to grow in complexity.

---