Advanced State Patterns

🎯 Advanced State Patterns in React Native

The Family Communication System

Imagine your React Native app is like a big family living in a house. Each room is a component, and the family members need to share information with each other. Today, we’ll learn four powerful ways to manage this communication!

🏠 Our Universal Analogy: The Family House

Think of your app like a house with rooms:

• Parent rooms = Parent components (like the living room)
• Child rooms = Child components (like bedrooms)
• Shared information = State that everyone needs
• House rules = Patterns for managing state

1️⃣ Lifting State Up

The Story: The TV Remote Problem

Imagine two kids (Sarah and Tom) each have a bedroom. They both want to watch the same TV channel, but they’re fighting about who controls the remote!

The Problem:

• Sarah changes the channel in her room
• Tom doesn’t know what happened
• They’re watching different things!

The Solution: Put the remote in the living room (parent). Now both kids ask Mom to change the channel, and everyone sees the same thing!

graph TD
    A["🏠 Living Room<br/>Parent holds TV channel state"] --> B["🛏️ Sarah's Room<br/>Receives channel + asks to change]
    A --> C[🛏️ Tom's Room<br/>Receives channel + asks to change"]

💻 Code Example

Before (Bad): Each child has own state

// Sarah's Room - has its own channel
function SarahRoom() {
  const [channel, setChannel] =
    useState(1);
  return (
    <Text>Watching: {channel}</Text>
  );
}

// Tom's Room - different channel!
function TomRoom() {
  const [channel, setChannel] =
    useState(5);
  return (
    <Text>Watching: {channel}</Text>
  );
}

After (Good): Parent holds the state

// Living Room - Parent controls TV
function LivingRoom() {
  const [channel, setChannel] =
    useState(1);

  return (
    <View>
      <SarahRoom
        channel={channel}
        onChange={setChannel}
      />
      <TomRoom
        channel={channel}
        onChange={setChannel}
      />
    </View>
  );
}

// Sarah's Room - asks parent
function SarahRoom({ channel, onChange }) {
  return (
    <View>
      <Text>Watching: {channel}</Text>
      <Button
        title="Next"
        onPress={() => onChange(channel + 1)}
      />
    </View>
  );
}

🔑 Key Points

• Lift state UP to the nearest common parent
• Pass state DOWN as props
• Pass update functions DOWN too
• Now both children stay in sync!

2️⃣ Derived State

The Story: The Shopping Cart Total

Imagine you have a shopping cart with items. Each item has a price. You want to show the total price.

Silly Approach: Every time you add an item, manually update a separate “total” number.

Smart Approach: Just calculate the total from the items you already have! That’s derived state.

🌟 Simple Explanation

Derived State = Information you calculate FROM existing state

It’s like asking:

• “How many toys do I have?” → Just count your toy box!
• “What’s my full name?” → Just combine first + last name!

graph TD
    A["📦 Source State<br/>items array"] --> B["🧮 Derived State<br/>total = items.reduce..."]
    A --> C["🧮 Derived State<br/>count = items.length"]

💻 Code Example

function ShoppingCart() {
  // Source State - what we actually store
  const [items, setItems] = useState([
    { name: 'Apple', price: 1 },
    { name: 'Bread', price: 3 },
    { name: 'Milk', price: 2 }
  ]);

  // Derived State - calculated, NOT stored!
  const totalPrice = items.reduce(
    (sum, item) => sum + item.price,
    0
  );
  const itemCount = items.length;
  const isEmpty = items.length === 0;

  return (
    <View>
      <Text>Items: {itemCount}</Text>
      <Text>Total: ${totalPrice}</Text>
      {isEmpty && <Text>Cart is empty!</Text>}
    </View>
  );
}

🚫 What NOT To Do

// ❌ BAD - Don't store derived values!
const [items, setItems] = useState([]);
const [total, setTotal] = useState(0);
const [count, setCount] = useState(0);

// Now you must update 3 things every time!
// Easy to forget and have bugs!

🔑 Key Points

• If you can calculate it from existing state, do it!
• Don’t store what you can compute
• Keeps your state simple and bug-free
• Calculated values are always in sync automatically

3️⃣ useReducer Hook

The Story: The Restaurant Kitchen

Imagine a restaurant kitchen. Instead of everyone shouting different orders, there’s an order system:

1. Waiter writes down the order (action)
2. Chef (reducer) reads the order and makes the food
3. Kitchen state gets updated

This is useReducer! It’s like having a chef who knows exactly what to do for each type of order.

graph TD
    A["📝 Action<br/>type: ADD_ITEM"] --> B["👨‍🍳 Reducer<br/>Reads action, updates state"]
    B --> C["🍽️ New State<br/>Updated kitchen inventory"]
    D["📝 Action<br/>type: REMOVE_ITEM"] --> B

💻 Basic Pattern

import { useReducer } from 'react';

// The Chef's recipe book
function counterReducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    case 'RESET':
      return { count: 0 };
    default:
      return state;
  }
}

function Counter() {
  // state = current state
  // dispatch = send orders to chef
  const [state, dispatch] = useReducer(
    counterReducer,
    { count: 0 }
  );

  return (
    <View>
      <Text>Count: {state.count}</Text>
      <Button
        title="+1"
        onPress={() =>
          dispatch({ type: 'INCREMENT' })
        }
      />
      <Button
        title="-1"
        onPress={() =>
          dispatch({ type: 'DECREMENT' })
        }
      />
      <Button
        title="Reset"
        onPress={() =>
          dispatch({ type: 'RESET' })
        }
      />
    </View>
  );
}

🛒 Real Example: Shopping Cart

function cartReducer(state, action) {
  switch (action.type) {
    case 'ADD_ITEM':
      return {
        ...state,
        items: [...state.items, action.item]
      };
    case 'REMOVE_ITEM':
      return {
        ...state,
        items: state.items.filter(
          item => item.id !== action.id
        )
      };
    case 'CLEAR_CART':
      return { ...state, items: [] };
    default:
      return state;
  }
}

function ShoppingCart() {
  const [cart, dispatch] = useReducer(
    cartReducer,
    { items: [] }
  );

  const addApple = () => {
    dispatch({
      type: 'ADD_ITEM',
      item: { id: 1, name: 'Apple', price: 1 }
    });
  };

  return (
    <View>
      <Text>Items: {cart.items.length}</Text>
      <Button title="Add Apple" onPress={addApple} />
      <Button
        title="Clear"
        onPress={() =>
          dispatch({ type: 'CLEAR_CART' })
        }
      />
    </View>
  );
}

🆚 useState vs useReducer

🔑 Key Points

• Reducer = A function that takes state + action, returns new state
• Dispatch = Send actions to trigger updates
• Great for complex state with many update types
• All state logic lives in one place

4️⃣ Conditional Rendering

The Story: The Magic Door

Imagine a magic door that shows different things based on who’s looking:

• If you’re a kid → Shows toys
• If you’re an adult → Shows work stuff
• If no one’s there → Shows “Welcome!”

This is conditional rendering – showing different things based on conditions!

💻 Three Ways to Do It

Way 1: If-Else (Outside JSX)

function WelcomeScreen({ user }) {
  // Decide what to show BEFORE return
  let content;

  if (user) {
    content = <Text>Hello, {user.name}!</Text>;
  } else {
    content = <Text>Please log in</Text>;
  }

  return <View>{content}</View>;
}

Way 2: Ternary Operator (? :)

function WelcomeScreen({ user }) {
  return (
    <View>
      {user ? (
        <Text>Hello, {user.name}!</Text>
      ) : (
        <Text>Please log in</Text>
      )}
    </View>
  );
}

Way 3: && Operator (Show or Nothing)

function Notification({ hasMessage }) {
  return (
    <View>
      {hasMessage && (
        <Text>🔔 You have a new message!</Text>
      )}
    </View>
  );
}

🎨 Visual Guide

graph TD
    A["Check Condition"] --> B{Is it true?}
    B -->|Yes| C["Show This ✅"]
    B -->|No| D["Show That ❌<br/>or Nothing"]

🛠️ Real-World Example

function ProfileScreen({ user, isLoading, error }) {
  // Loading state
  if (isLoading) {
    return <ActivityIndicator size="large" />;
  }

  // Error state
  if (error) {
    return <Text style={{ color: 'red' }}>
      Oops! {error}
    </Text>;
  }

  // No user state
  if (!user) {
    return <Text>Please log in</Text>;
  }

  // Success state - show profile
  return (
    <View>
      <Text style={{ fontSize: 24 }}>
        {user.name}
      </Text>
      <Text>{user.email}</Text>

      {user.isPremium && (
        <Text>⭐ Premium Member</Text>
      )}

      {user.notifications > 0 ? (
        <Text>
          🔔 {user.notifications} new
        </Text>
      ) : (
        <Text>No notifications</Text>
      )}
    </View>
  );
}

⚠️ Watch Out!

// ❌ Bug with numbers!
{count && <Text>Count: {count}</Text>}
// If count = 0, shows "0" on screen!

// ✅ Fix it like this:
{count > 0 && <Text>Count: {count}</Text>}
// OR
{count !== 0 && <Text>Count: {count}</Text>}

🔑 Key Points

• Ternary (? :) = Show A or B
• && Operator = Show or hide
• If-else = Complex logic before JSX
• Watch out for falsy values like 0!

🎯 Quick Summary

🚀 You Did It!

Now you understand the four superpowers of state management:

1. 🏠 Lift state up to share between siblings
2. 🧮 Derive state instead of storing calculated values
3. 👨‍🍳 useReducer for complex state with many actions
4. 🚪 Conditional rendering to show the right UI

These patterns will make your React Native apps cleaner, faster, and easier to understand!

Remember: Good state management is like a well-organized house – everyone knows where things are, and nothing gets lost! 🏡✨