🔄 State Management: The Pulse of React

If Props are the DNA a component receives from its parent (unchangeable), State is the local memory of the component. State makes a static user interface highly interactive by allowing it to "remember" things—like whether a modal is open, or what text is typed into an input field.

When State changes, React magically triggers a Re-render, automatically updating the DOM to reflect the new reality.

---

1️⃣ The useState Hook

Before Hooks were introduced in 2018, handling State required writing complex JavaScript Classes. Today, we use the useState hook, which is vastly simpler and more functional.

import { useState } from 'react'; // Mandatory import

function Counter() {
    // Array Destructuring:
    // [The current value, The function that updates the value] = useState(Internal starting value)
    const [count, setCount] = useState(0);

    return (
        <div>
            <h1>Current Count: {count}</h1>
            
            {/* Warning: We pass an arrow function so it doesn't execute instantly on load! */}
            <button onClick={() => setCount(count + 1)}>
                Increment
            </button>
        </div>
    );
}

🛑 The Golden Rule of State: IMMUTABILITY

You cannot directly mutate (change) a state variable.

// ❌ ILLEGAL: This will absolutely crash your React app's rendering cycle.
// React will not notice the change and the screen will not update.
count = count + 1; 

// ✅ LEGAL: You MUST use the designated setter function.
// This notifies the React Engine to update the DOM.
setCount(count + 1);

---

2️⃣ Updating State Based on Previous State

What happens if you click a button twice extremely fast?

// Buggy implementation
function upgradeTwice() {
    // If count is 0, both of these functions read "0", calculate "0 + 1", and set it to 1.
    setCount(count + 1); 
    setCount(count + 1); 
    // The final count is 1, not 2!
}

If your next state mathematically depends on what the state was one millisecond ago, you must use the Callback/Updater Function inside the setter. This guarantees React uses the absolute latest version of the state.

// Bulletproof implementation
function upgradeTwice() {
    // Instead of passing a raw value, pass a function that takes the PREVIOUS state.
    setCount((prevCount) => prevCount + 1); 
    setCount((prevCount) => prevCount + 1); 
    // The final count is reliably 2.
}

---

3️⃣ Handling Complex State (Objects & Arrays)

State isn't just for numbers and booleans. It governs complex arrays and objects. But because of the Immutability rule, updating them is tricky. You cannot use .push() or change object properties directly. You must completely clone them using the Spread Operator (...).

Updating an Object

const [user, setUser] = useState({ name: "Mwero", age: 25 });

const celebrateBirthday = () => {
    // ❌ ILLEGAL: Direct mutation. React will ignore this.
    // user.age = 26; 

    // ✅ LEGAL: Clone the whole object, then violently overwrite the 'age' property.
    setUser({ ...user, age: user.age + 1 });
};

Updating an Array

const [todos, setTodos] = useState(["Eat", "Sleep"]);

const addTodo = (newTodo) => {
    // ❌ ILLEGAL: Direct mutation.
    // todos.push(newTodo);

    // ✅ LEGAL: Clone the existing array and append the new item into a brand new array.
    setTodos([...todos, newTodo]);
};

---

4️⃣ Two-Way Data Binding (Controlled Inputs)

By default, an HTML <input> manages its own internal state on the screen. In React, we must hijack that input to ensure React is always fully aware of what the user is typing. This is called a Controlled Component.

function SearchBar() {
    const [query, setQuery] = useState("");

    const handleTyping = (event) => {
        // event.target.value is whatever the user just aggressively smashed on the keyboard
        setQuery(event.target.value);
    };

    return (
        <div>
            {/* The flow: Input fires onChange -> updates State -> State forces Input value -> Repeat */}
            <input 
                type="text" 
                value={query} 
                onChange={handleTyping} 
                placeholder="Search..."
            />
            <p>Currently searching for: {query}</p>
        </div>
    );
}

---

5️⃣ Lifting State Up (Shared State Architecture)

If <Sidebar /> needs to know if the user is authenticated, and <Navbar /> needs to show the user's avatar, where does the user State live?

State only flows downward. Therefore, if two sibling components need access to the same piece of data, you must Lift the State Up to their nearest common ancestor.

function App() {
    const [isAuthenticated, setIsAuthenticated] = useState(false);

    return (
        <div>
            <Navbar authStatus={isAuthenticated} />
            
            {/* We pass down the STATE, and also pass down the SETTER FUNCTION so the Login 
                box can update the parent's state from deep down below! */}
            <LoginBox 
                authStatus={isAuthenticated} 
                updateAuth={setIsAuthenticated} 
            />
        </div>
    );
}

---

💡 Summary Rules of the State Universe

• State makes a component dynamic. Props make it reusable.
• Never directly mutate state (arr.push() or obj.key = x). Always use the setter function.
• If updating state based on the previous stroke of state, use the updater callback (prev => prev + 1).
• For Arrays and Objects, always clone them first using the Spread Operator [...] or {...}.
• Tie all form inputs strictly to state variables via value and onChange.
• If two separate components need the same data, lift the state up to their parent.