🎯 State Management Patterns

Before Adding State, Ask:

1. Can this be calculated from existing state or props?
   → If yes, don't store it - derive it instead!
2. Which components need to read or update this state?
   → State should live in their common parent
3. Is this state truly shared, or just passed through?
   → If just passed through, consider restructuring

Scenario: Temperature Converter

Imagine two input fields - one for Celsius, one for Fahrenheit. Type into either one and the other should update to match. The catch: they're sibling components, and in React data only flows downward from parent to child. Siblings have no direct line to each other.

Think of two kids in different rooms who can only talk to a parent, never to each other directly. If they need to coordinate, the message has to go up to the parent and back down. That is exactly what lifting state up sets up.

Before: State in Children (Doesn't Work)

// ❌ Problem: Each has its own independent state
const CelsiusInput: React.FC = () => {
    const [temperature, setTemperature] = useState('');
    
    return (
        <input 
            value={temperature}
            onChange={(e) => setTemperature(e.target.value)}
        />
    );
};

const FahrenheitInput: React.FC = () => {
    const [temperature, setTemperature] = useState('');
    
    return (
        <input 
            value={temperature}
            onChange={(e) => setTemperature(e.target.value)}
        />
    );
};

❌ They can't synchronize - each input owns a separate, independent piece of state. Typing in one has no way to reach the other.

After: State in Parent (Works!)

// ✅ Solution: Lift state to parent
interface TemperatureInputProps {
    temperature: string;
    onTemperatureChange: (temp: string) => void;
    scale: 'c' | 'f';
}

const TemperatureInput: React.FC<TemperatureInputProps> = ({
    temperature,
    onTemperatureChange,
    scale
}) => {
    const scaleName = scale === 'c' ? 'Celsius' : 'Fahrenheit';
    
    return (
        <div>
            <label>{scaleName}:</label>
            <input 
                value={temperature}
                onChange={(e) => onTemperatureChange(e.target.value)}
            />
        </div>
    );
};

// Parent component manages the shared state
const TemperatureConverter: React.FC = () => {
    const [temperature, setTemperature] = useState('');
    const [scale, setScale] = useState<'c' | 'f'>('c');
    
    const handleCelsiusChange = (temp: string) => {
        setScale('c');
        setTemperature(temp);
    };
    
    const handleFahrenheitChange = (temp: string) => {
        setScale('f');
        setTemperature(temp);
    };
    
    // Convert temperatures
    const celsius = scale === 'f' 
        ? ((parseFloat(temperature) - 32) * 5/9).toFixed(1)
        : temperature;
    const fahrenheit = scale === 'c'
        ? ((parseFloat(temperature) * 9/5) + 32).toFixed(1)
        : temperature;
    
    return (
        <div>
            <TemperatureInput
                temperature={celsius}
                onTemperatureChange={handleCelsiusChange}
                scale="c"
            />
            <TemperatureInput
                temperature={fahrenheit}
                onTemperatureChange={handleFahrenheitChange}
                scale="f"
            />
        </div>
    );
};

✅ Now both fields stay synchronized through the parent — one value, two views.

The Lifting State Up Recipe

1. Remove state from children - Delete their useState calls
2. Add state to parent - Parent now owns the data
3. Pass data down as props - Children receive the current value
4. Pass callbacks down - Children can request updates
5. Make children controlled - They no longer manage their own state

Example: Prop Drilling Code

// ❌ Prop drilling - passing user through many layers
interface User {
    name: string;
    avatar: string;
}

const App: React.FC = () => {
    const [user, setUser] = useState<User>({ name: 'Alice', avatar: '👤' });
    
    return <Main user={user} />;
};

// Main doesn't use user, just passes it down
const Main: React.FC<{ user: User }> = ({ user }) => {
    return <Content user={user} />;
};

// Content doesn't use user, just passes it down
const Content: React.FC<{ user: User }> = ({ user }) => {
    return <Article user={user} />;
};

// Article doesn't use user, just passes it down
const Article: React.FC<{ user: User }> = ({ user }) => {
    return <Author user={user} />;
};

// Finally! Author actually uses it
const Author: React.FC<{ user: User }> = ({ user }) => {
    return <div>{user.avatar} {user.name}</div>;
};

1. Component Composition (Recommended)

Instead of passing props down, pass components as children:

// ✅ Better: Use composition
const App: React.FC = () => {
    const [user, setUser] = useState<User>({ name: 'Alice', avatar: '👤' });
    
    return (
        <Main>
            <Content>
                <Article>
                    <Author user={user} />
                </Article>
            </Content>
        </Main>
    );
};

// Now these components don't need to know about user!
const Main: React.FC<{ children: React.ReactNode }> = ({ children }) => {
    return <main>{children}</main>;
};

const Content: React.FC<{ children: React.ReactNode }> = ({ children }) => {
    return <div className="content">{children}</div>;
};

2. Context API (For Truly Global Data)

We'll cover this in detail in Module 5, but here's a preview:

// Create context (we'll learn this later!)
const UserContext = React.createContext<User | null>(null);

// Provider at top
const App: React.FC = () => {
    const [user, setUser] = useState<User>({ name: 'Alice', avatar: '👤' });
    
    return (
        <UserContext.Provider value={user}>
            <Main />
        </UserContext.Provider>
    );
};

// Consumer deep in tree - no prop drilling!
const Author: React.FC = () => {
    const user = useContext(UserContext);
    return <div>{user?.avatar} {user?.name}</div>;
};

Kent C. Dodds' Rule

"Place code as close to where it's relevant as possible"

Don't lift state higher than necessary. Each component should own the minimal amount of state it needs.

Example: Accordion Component

// ❌ Bad: App manages accordion state it doesn't need
const App: React.FC = () => {
    const [openPanel, setOpenPanel] = useState<number | null>(null);
    
    return (
        <div>
            <Header />
            <Sidebar />
            <Accordion openPanel={openPanel} setOpenPanel={setOpenPanel} />
            <Footer />
        </div>
    );
};

// Why does App need to know about accordion state?
// Header, Sidebar, and Footer don't care!

Better: State Lives Where It's Used

// ✅ Good: Accordion manages its own state
const App: React.FC = () => {
    return (
        <div>
            <Header />
            <Sidebar />
            <Accordion />  {/* Self-contained! */}
            <Footer />
        </div>
    );
};

const Accordion: React.FC = () => {
    // State lives here - only this component needs it
    const [openPanel, setOpenPanel] = useState<number | null>(null);
    
    return (
        <div>
            <AccordionPanel
                id={0}
                isOpen={openPanel === 0}
                onToggle={() => setOpenPanel(openPanel === 0 ? null : 0)}
            >
                Panel 1 Content
            </AccordionPanel>
            <AccordionPanel
                id={1}
                isOpen={openPanel === 1}
                onToggle={() => setOpenPanel(openPanel === 1 ? null : 1)}
            >
                Panel 2 Content
            </AccordionPanel>
        </div>
    );
};

Modal That Manages Its Own State

// ✅ Modal is self-contained
interface ModalProps {
    trigger: React.ReactNode;
    children: React.ReactNode;
}

const Modal: React.FC<ModalProps> = ({ trigger, children }) => {
    // State is colocated with the component that uses it
    const [isOpen, setIsOpen] = useState(false);
    
    return (
        <>
            <div onClick={() => setIsOpen(true)}>
                {trigger}
            </div>
            
            {isOpen && (
                <div className="modal-overlay" onClick={() => setIsOpen(false)}>
                    <div className="modal-content" onClick={(e) => e.stopPropagation()}>
                        {children}
                        <button onClick={() => setIsOpen(false)}>Close</button>
                    </div>
                </div>
            )}
        </>
    );
};

// Easy to use anywhere!
const App: React.FC = () => {
    return (
        <div>
            <Modal trigger={<button>Open Settings</button>}>
                <SettingsForm />
            </Modal>
            
            <Modal trigger={<button>Open Profile</button>}>
                <ProfileEditor />
            </Modal>
        </div>
    );
};

Example: Shopping Cart

// ❌ Bad: Storing derived values
interface CartItem {
    id: number;
    name: string;
    price: number;
    quantity: number;
}

const ShoppingCart: React.FC = () => {
    const [items, setItems] = useState<CartItem[]>([]);
    const [itemCount, setItemCount] = useState(0);      // Redundant!
    const [totalPrice, setTotalPrice] = useState(0);    // Redundant!
    
    const addItem = (item: CartItem) => {
        setItems([...items, item]);
        setItemCount(itemCount + 1);                     // Extra work!
        setTotalPrice(totalPrice + item.price);          // Extra work!
    };
    
    // What if we remove an item? Update all three states!
    // What if quantity changes? Update all three states!
    // Easy to get out of sync! 😱
};

Better: Calculate Derived Values

// ✅ Good: Derive values from source of truth
interface CartItem {
    id: number;
    name: string;
    price: number;
    quantity: number;
}

const ShoppingCart: React.FC = () => {
    // Only store the source of truth
    const [items, setItems] = useState<CartItem[]>([]);
    
    // Derive everything else
    const itemCount = items.reduce((sum, item) => sum + item.quantity, 0);
    const totalPrice = items.reduce((sum, item) => sum + (item.price * item.quantity), 0);
    
    const addItem = (item: CartItem) => {
        setItems([...items, item]);
        // That's it! Counts update automatically
    };
    
    return (
        <div>
            <p>Items: {itemCount}</p>
            <p>Total: ${totalPrice.toFixed(2)}</p>
            {/* ... */}
        </div>
    );
};

Deriving Filtered Lists

interface Todo {
    id: number;
    text: string;
    completed: boolean;
}

type Filter = 'all' | 'active' | 'completed';

const TodoList: React.FC = () => {
    // Store only the essential state
    const [todos, setTodos] = useState<Todo[]>([]);
    const [filter, setFilter] = useState<Filter>('all');
    
    // Derive filtered list (recalculated every render)
    const filteredTodos = todos.filter(todo => {
        if (filter === 'active') return !todo.completed;
        if (filter === 'completed') return todo.completed;
        return true; // 'all'
    });
    
    // Derive statistics
    const totalCount = todos.length;
    const activeCount = todos.filter(t => !t.completed).length;
    const completedCount = todos.filter(t => t.completed).length;
    
    return (
        <div>
            <div>
                <button onClick={() => setFilter('all')}>
                    All ({totalCount})
                </button>
                <button onClick={() => setFilter('active')}>
                    Active ({activeCount})
                </button>
                <button onClick={() => setFilter('completed')}>
                    Completed ({completedCount})
                </button>
            </div>
            
            <ul>
                {filteredTodos.map(todo => (
                    <li key={todo.id}>{todo.text}</li>
                ))}
            </ul>
        </div>
    );
};

Direct Value

// Simple - pass the initial value directly
const [count, setCount] = useState(0);
const [name, setName] = useState('');
const [items, setItems] = useState<string[]>([]);

Function Initializer

If calculating the initial state is expensive, pass a function instead:

// ❌ Bad: Runs expensive function on every render
const [todos, setTodos] = useState(loadTodosFromLocalStorage());
// loadTodosFromLocalStorage() runs every time, but only first value is used!

// ✅ Good: Lazy initialization - runs only once
const [todos, setTodos] = useState(() => loadTodosFromLocalStorage());
// Function only called on first render

// Another example
const [bigArray, setBigArray] = useState(() => {
    console.log('Computing initial state...');
    return Array.from({ length: 10000 }, (_, i) => i);
});
// Expensive computation only happens once!

Using Props for Initial State

// Common pattern: Initialize from props
interface CounterProps {
    initialCount: number;
}

const Counter: React.FC<CounterProps> = ({ initialCount }) => {
    const [count, setCount] = useState(initialCount);
    
    // Note: This only uses initialCount on first render
    // Later prop changes won't update state!
    
    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>+</button>
        </div>
    );
};

Using Key to Force Re-initialization

If you need state to reset when a prop changes, use the key prop:

// Force component to remount (and re-initialize state) when userId changes
<UserProfile key={userId} userId={userId} />

// Each unique key creates a new instance
<Counter key="counter1" initialCount={0} />
<Counter key="counter2" initialCount={10} />
// These are separate components with separate state!

Persisting State Across Page Loads

const useLocalStorage = <T,>(key: string, initialValue: T) => {
    // Lazy initialization from localStorage
    const [value, setValue] = useState<T>(() => {
        try {
            const item = window.localStorage.getItem(key);
            return item ? JSON.parse(item) : initialValue;
        } catch (error) {
            console.error(error);
            return initialValue;
        }
    });
    
    // Update localStorage when state changes
    const setStoredValue = (newValue: T) => {
        try {
            setValue(newValue);
            window.localStorage.setItem(key, JSON.stringify(newValue));
        } catch (error) {
            console.error(error);
        }
    };
    
    return [value, setStoredValue] as const;
};

// Usage
const [name, setName] = useLocalStorage('userName', '');
// State persists across page refreshes!

Passing Data Down

// Parent passes data to child via props
const Parent: React.FC = () => {
    const [message, setMessage] = useState('Hello!');
    
    return <Child message={message} />;
};

const Child: React.FC<{ message: string }> = ({ message }) => {
    return <p>{message}</p>;
};

Passing Data Up

// Child calls parent's function to send data up
const Parent: React.FC = () => {
    const [value, setValue] = useState('');
    
    const handleChange = (newValue: string) => {
        setValue(newValue);
        console.log('Child sent:', newValue);
    };
    
    return (
        <div>
            <Child onValueChange={handleChange} />
            <p>Parent received: {value}</p>
        </div>
    );
};

const Child: React.FC<{ onValueChange: (value: string) => void }> = ({ onValueChange }) => {
    return (
        <input 
            onChange={(e) => onValueChange(e.target.value)}
            placeholder="Type something..."
        />
    );
};

Sharing Data Between Siblings

// Siblings communicate through shared parent state
const Parent: React.FC = () => {
    const [sharedValue, setSharedValue] = useState('');
    
    return (
        <div>
            <InputChild onValueChange={setSharedValue} />
            <DisplayChild value={sharedValue} />
        </div>
    );
};

const InputChild: React.FC<{ onValueChange: (v: string) => void }> = ({ onValueChange }) => {
    return <input onChange={(e) => onValueChange(e.target.value)} />;
};

const DisplayChild: React.FC<{ value: string }> = ({ value }) => {
    return <p>Sibling says: {value}</p>;
};

Sharing Logic with Render Props

// Component provides functionality, parent controls rendering
interface MousePosition {
    x: number;
    y: number;
}

interface MouseTrackerProps {
    children: (position: MousePosition) => React.ReactNode;
}

const MouseTracker: React.FC<MouseTrackerProps> = ({ children }) => {
    const [position, setPosition] = useState({ x: 0, y: 0 });
    
    const handleMouseMove = (e: React.MouseEvent) => {
        setPosition({ x: e.clientX, y: e.clientY });
    };
    
    return (
        <div onMouseMove={handleMouseMove} style={{ height: '100vh' }}>
            {children(position)}
        </div>
    );
};

// Usage - consumer controls what to render
<MouseTracker>
    {({ x, y }) => (
        <p>Mouse position: {x}, {y}</p>
    )}
</MouseTracker>

What You Learned

📍 State Placement

• The golden rule: lowest common ancestor
• Three key questions before adding state
• Local vs lifted vs global state

⬆️ Lifting State Up

• How to share state between sibling components
• Moving state to parent components
• Props down, callbacks up pattern
• Creating controlled components

🕳️ Prop Drilling

• Recognizing prop drilling problems
• Solutions: composition and Context
• When prop drilling is acceptable

📍 State Colocation

• Keeping state close to where it's used
• Benefits of localized state
• Self-contained components

🔄 Derived State

• Calculating values instead of storing them
• Avoiding redundant state
• Single source of truth

🎬 State Initialization

• Direct vs lazy initialization
• Initializing from props
• Using key prop to reset state
• Local storage pattern

📚 Additional Resources

• React Docs: Sharing State Between Components
• React Docs: Choosing the State Structure
• Kent C. Dodds: State Colocation
• React Docs: Passing Data Deeply with Context