🎭 React State Patterns: The Family Communication Guide

Imagine your React app is a family living in a house. Each room (component) has its own stuff, but sometimes family members need to share things. Let’s learn the five golden rules of family sharing!

🏠 The Big Picture

Think of your React app like a family house:

• Each room is a component
• Each room has its own stuff (local state)
• Sometimes rooms need to share things
• The family needs rules so everyone knows where things are

Today we learn 5 patterns to keep the family happy:

1. Lifting State Up – Move shared stuff to a common room
2. Derived State – Calculate things instead of storing copies
3. Choosing State Structure – Organize your toy box smartly
4. Preserving State – Keep things safe when moving around
5. Resetting State – Start fresh with a clean room

1️⃣ Lifting State Up

The Problem: Two Kids Fighting Over the TV Remote

Imagine two kids in different rooms. Both want to control the same TV. If each kid has their own remote with different settings, chaos happens!

The Solution: Put the remote in the living room (parent), and let both kids ask the parent to change channels.

Before (Broken)

// Kid 1 has their own channel
function Kid1() {
  const [channel, setChannel] =
    useState(1);
  return <button>Channel: {channel}</button>;
}

// Kid 2 has their own channel
function Kid2() {
  const [channel, setChannel] =
    useState(5);
  return <button>Channel: {channel}</button>;
}
// 😱 They show different channels!

After (Fixed!)

// Parent holds the ONE remote
function LivingRoom() {
  const [channel, setChannel] =
    useState(1);

  return (
    <>
      <Kid1
        channel={channel}
        onChange={setChannel}
      />
      <Kid2
        channel={channel}
        onChange={setChannel}
      />
    </>
  );
}

// Kids just ask to change
function Kid1({ channel, onChange }) {
  return (
    <button onClick={() => onChange(2)}>
      Channel: {channel}
    </button>
  );
}

🎯 The Golden Rule

When two components need the same data, move it to their closest common parent.

graph TD
    A[Parent: Owns the State] --> B[Child 1: Uses State]
    A --> C[Child 2: Uses State]
    B -.-> A
    C -.-> A
    style A fill:#4CAF50,color:#fff
    style B fill:#2196F3,color:#fff
    style C fill:#2196F3,color:#fff

2️⃣ Derived State

The Problem: Writing the Same Thing Twice

Imagine you have a shopping list. You write:

• Apples: 3
• Bananas: 2
• Total items: 5

But wait! Do you NEED to write the total? You can always count it!

❌ Bad: Storing What You Can Calculate

function Cart() {
  const [items, setItems] = useState([
    { name: 'Apple', qty: 3 },
    { name: 'Banana', qty: 2 }
  ]);

  // 😱 Storing total separately
  const [total, setTotal] = useState(5);

  // Now you must update BOTH!
  // Easy to forget and cause bugs!
}

✅ Good: Calculate on the Fly

function Cart() {
  const [items, setItems] = useState([
    { name: 'Apple', qty: 3 },
    { name: 'Banana', qty: 2 }
  ]);

  // ✨ Calculate when needed
  const total = items.reduce(
    (sum, item) => sum + item.qty,
    0
  );

  // total is always correct!
  return <p>Total: {total}</p>;
}

🎯 The Golden Rule

If you can calculate something from existing state, don’t store it. Derive it!

3️⃣ Choosing State Structure

The Problem: Messy Toy Box

Imagine a toy box where:

• Cars are mixed with dolls
• Some toys have duplicate names
• You can’t find anything!

Good structure = Easy to find things!

5 Rules for a Tidy State

Rule 1: Group Related Data

// ❌ Scattered
const [x, setX] = useState(0);
const [y, setY] = useState(0);

// ✅ Grouped
const [position, setPosition] = useState({
  x: 0,
  y: 0
});

Rule 2: No Contradictions

// ❌ Can be both sending AND sent (impossible!)
const [isSending, setIsSending] = useState(false);
const [isSent, setIsSent] = useState(false);

// ✅ One status, clear states
const [status, setStatus] = useState('typing');
// 'typing' | 'sending' | 'sent'

Rule 3: No Duplicates

// ❌ Same data in two places
const [items, setItems] = useState([...]);
const [selectedItem, setSelectedItem] =
  useState(items[0]); // Duplicate!

// ✅ Store just the ID
const [items, setItems] = useState([...]);
const [selectedId, setSelectedId] =
  useState(0);
// Derive the item when needed
const selectedItem = items.find(
  i => i.id === selectedId
);

Rule 4: No Deep Nesting

// ❌ Deep and confusing
const [data, setData] = useState({
  user: {
    profile: {
      settings: {
        theme: 'dark'
      }
    }
  }
});

// ✅ Flat and simple
const [theme, setTheme] = useState('dark');
const [userId, setUserId] = useState(1);

Rule 5: Avoid Redundancy

// ❌ firstName + lastName + fullName
// fullName is redundant!

// ✅ Just store what you need
const [firstName, setFirstName] =
  useState('');
const [lastName, setLastName] =
  useState('');
// Derive fullName
const fullName = `${firstName} ${lastName}`;

4️⃣ Preserving State

The Problem: Moving Rooms and Losing Your Toys

When you move to a different room, do your toys disappear? No! They stay where you put them.

In React, components can keep or lose their state based on where they are in the tree.

Same Position = Same State

function App() {
  const [isRed, setIsRed] = useState(true);

  return (
    <div>
      {isRed ? (
        <Counter style="red" />
      ) : (
        <Counter style="blue" />
      )}
      {/* Same position = state preserved! */}
    </div>
  );
}

The counter keeps its count! Why? Because <Counter> is in the same position in the tree, even though the color changes.

graph TD
    A[App] --> B[div]
    B --> C["Counter #40;same spot!#41;"]
    style C fill:#4CAF50,color:#fff

Different Position = Different State

function App() {
  const [isRed, setIsRed] = useState(true);

  return (
    <div>
      {isRed && <Counter style="red" />}
      {!isRed && <Counter style="blue" />}
      {/* Different positions = fresh state */}
    </div>
  );
}

Now each counter is at a different “address” in the tree. Switching destroys one and creates another!

🎯 The Golden Rule

React preserves state when a component stays in the same position in the UI tree.

5️⃣ Resetting State

The Problem: Need a Fresh Start

Sometimes you WANT to reset. Like when:

• A new player joins the game
• You switch to a different chat
• You want to clear a form

Method 1: Different Position

// When isTom changes, Counter resets
{isTom ? (
  <Counter person="Tom" />
) : (
  <Counter person="Jerry" />
)}
// Different "address" = fresh state

Wait, this looks like the same trick! Yes, but now we’re using it on purpose to reset.

Method 2: The Key Trick 🔑

// Give each person their own "locker"
<Counter
  key={personId}
  person={currentPerson}
/>

When personId changes, React sees a “new” counter and resets it!

Real Example: Chat App

function ChatApp() {
  const [friendId, setFriendId] =
    useState('alice');

  return (
    <>
      <FriendList onSelect={setFriendId} />
      {/* Key resets chat when friend changes */}
      <ChatBox
        key={friendId}
        friend={friendId}
      />
    </>
  );
}

When you click a different friend, the chat clears. The key tells React: “This is a NEW chat, start fresh!”

🎯 The Golden Rule

Use the key prop to force React to reset a component’s state.

🎬 Summary: The Family Rules

🚀 You Did It!

You now understand the 5 golden patterns of React state:

1. 🏠 Lift it up when siblings need to share
2. 🧮 Derive it when you can calculate
3. 📦 Structure it to avoid confusion
4. 🔒 Preserve it by keeping position
5. 🔑 Reset it with the key prop

Remember: State is like a family. Keep it organized, share when needed, and know when to start fresh!

Happy coding! 🎉