🚀 React Props & State

• Props are immutable - component receiving props cannot modify them
• Props are passed from parent to child component
• Props are used to pass data and event handlers to child components
• Changes in props cause component to re-render

• State is mutable - component can change its own state using setState
• State is local and private to the component
• State is used for data that changes over time
• Changes in state cause component to re-render

• Predictability: Makes component behavior predictable - same props always produce same output
• Debugging: Easier to track where data changes are coming from
• Performance: React can optimize rendering by doing shallow comparisons
• Unidirectional Data Flow: Data flows one way (parent to child), making app logic easier to understand

• Code becomes harder to maintain
• Unnecessary prop passing clutters intermediate components
• Refactoring becomes difficult

• Context API: Share data without passing props explicitly
• Component Composition: Restructure components using children props
• State Management Libraries: Redux, Zustand, Recoil
• Custom Hooks: Encapsulate logic and state

• Don't call Hooks inside loops, conditions, or nested functions
• This ensures Hooks are called in the same order on every render
• Wrong: if (condition) { useState(0); } ❌
• Right: Call at top level, then use condition inside ✅

• Call from React function components
• Call from custom Hooks
• Don't call from regular JavaScript functions

// Direct update
setCount(count + 1);

// Functional update
setCount(prevCount => prevCount + 1);
                        

• Multiple updates in same function: Ensures each update uses latest state
• Inside useEffect or callbacks: Avoids stale closure issues
• When new state depends on previous state: Guarantees correct value

// ❌ This might not work as expected
setCount(count + 1);
setCount(count + 1);
setCount(count + 1);
// Result: count + 1 (not count + 3!)

// ✅ This works correctly
setCount(c => c + 1);
setCount(c => c + 1);
setCount(c => c + 1);
// Result: count + 3 ✓
                        

useEffect(() => {
    console.log("Runs after EVERY render");
});
// Use case: Rarely needed, usually inefficient
                        

useEffect(() => {
    console.log("Runs ONCE on mount");
    // API calls, subscriptions, etc.
}, []);
// Use case: Component initialization, data fetching
                        

useEffect(() => {
    console.log("Runs when count or name changes");
}, [count, name]);
// Use case: React to specific state/prop changes
                        

• Include ALL values used inside effect that come from component scope
• ESLint plugin helps catch missing dependencies
• Objects/arrays create new references, use useCallback/useMemo if needed

// ❌ BAD: Unnecessary derived state
function UserList({ users }) {
    const [userCount, setUserCount] = useState(users.length);
    
    // Problem: userCount won't update when users prop changes!
    return <div>Total: {userCount}</div>;
}
                        

• Sync Issues: Derived state can become out of sync with source
• Complexity: Need useEffect to keep things in sync
• Bugs: Easy to forget updating derived state
• Performance: Extra state means extra memory and re-renders

// ✅ GOOD: Calculate during render
function UserList({ users }) {
    const userCount = users.length; // Direct calculation
    
    return <div>Total: {userCount}</div>;
}

// ✅ For expensive calculations, use useMemo
function UserList({ users }) {
    const sortedUsers = useMemo(() => {
        return users.sort((a, b) => a.name.localeCompare(b.name));
    }, [users]);
    
    return <div>{sortedUsers.length} users</div>;
}