State Management

🔍 What is State Management?

In React, state refers to data that drives component behavior and UI rendering.

State Management is the technique of controlling how that data is created, updated, and shared across components.

🪜 2. Lifting State Up

✅ What It Means

When multiple sibling components need access to shared state, move the state to their nearest common parent.

📦 Example

🪢 3. Prop Drilling

🔍 What It Means

Prop Drilling is when you pass data through multiple components — even if some intermediate ones don’t use it.

🔁 Example

Problem: Parent has to pass down user even if it doesn't need it.

🌐 4. Context API

✅ Why Use It?

To avoid prop drilling and make shared state accessible deep in the component tree.

🛠️ Step-by-Step

1. Create Context

2. Provide Context

3. Consume Context

🧰 5. External State Management Libraries

When your app grows, Context may become hard to manage or inefficient. That's where state libraries come in.

🔁 Redux

✅ Core Features

• Centralized global store
• Actions & reducers for logic
• Middleware support (e.g., Redux Thunk)

🧪 Example Flow

1. Create Slice

2. Configure Store

3. Wrap in Provider

4. Use in Component

⚡ Zustand

✅ Features

• Minimal API (just one hook)
• No boilerplate
• Fast and simple

🧬 Recoil

✅ Features

• Built for React
• State via atoms
• Supports async selectors

🧠 When to Use What?

✅ Summary