React Developer Tools

// After installing the extension, you'll see a new tab in your browser's developer tools

// 1. Components Tab
// - View component hierarchy
// - Inspect component props and state
// - See component names and file locations
// - Highlight components on the page

// 2. Profiler Tab
// - Record performance profiles
// - Analyze component render times
// - Identify performance bottlenecks
// - Optimize component rendering

// Example component to inspect
function UserProfile({ user, onUpdate }) {
    const [isEditing, setIsEditing] = useState(false);
    const [formData, setFormData] = useState(user);

    const handleSubmit = (e) => {
        e.preventDefault();
        onUpdate(formData);
        setIsEditing(false);
    };

    return (
        <div className="user-profile">
            {isEditing ? (
                <form onSubmit={handleSubmit}>
                    <input 
                        value={formData.name}
                        onChange={(e) => setFormData({
                            ...formData,
                            name: e.target.value
                        })}
                    />
                    <input 
                        value={formData.email}
                        onChange={(e) => setFormData({
                            ...formData,
                            email: e.target.value
                        })}
                    />
                    <button type="submit">Save</button>
                    <button type="button" onClick={() => setIsEditing(false)}>
                        Cancel
                    </button>
                </form>
            ) : (
                <div>
                    <h2>{user.name}</h2>
                    <p>{user.email}</p>
                    <button onClick={() => setIsEditing(true)}>Edit</button>
                </div>
            )}
        </div>
    );
}

// In React DevTools, you can:
// - See the component tree
// - Inspect props and state values
// - Modify state in real-time
// - See component render times
// - Identify unnecessary re-renders

// Common debugging scenarios

// 1. Props not updating
function ParentComponent() {
    const [user, setUser] = useState({ name: 'John', email: 'john@example.com' });
    
    // Check in DevTools if props are being passed correctly
    return <UserProfile user={user} onUpdate={setUser} />;
}

// 2. State not updating
function Counter() {
    const [count, setCount] = useState(0);
    
    // Use DevTools to see if state is actually changing
    const increment = () => {
        setCount(prev => prev + 1);
        console.log('Count should be:', count + 1);
    };
    
    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={increment}>Increment</button>
        </div>
    );
}

// 3. Component not re-rendering
function ExpensiveComponent({ data }) {
    // Use Profiler to see if component is re-rendering unnecessarily
    console.log('ExpensiveComponent rendered');
    
    return (
        <div>
            {data.map(item => (
                <div key={item.id}>{item.name}</div>
            ))}
        </div>
    );
}

// 4. Performance optimization
function OptimizedComponent({ items }) {
    // Use Profiler to measure render performance
    const memoizedItems = useMemo(() => {
        return items.filter(item => item.active);
    }, [items]);
    
    return (
        <div>
            {memoizedItems.map(item => (
                <div key={item.id}>{item.name}</div>
            ))}
        </div>
    );
}

// Exercise: Debug a React Application
// Create a buggy component and use DevTools to fix it

// src/components/BuggyCounter.js
import React, { useState, useEffect } from 'react';

function BuggyCounter() {
    const [count, setCount] = useState(0);
    const [isRunning, setIsRunning] = useState(false);
    
    // Bug: useEffect dependency array is missing
    useEffect(() => {
        let interval;
        if (isRunning) {
            interval = setInterval(() => {
                setCount(prev => prev + 1);
            }, 1000);
        }
        return () => clearInterval(interval);
    }); // Missing dependency array!
    
    return (
        <div className="buggy-counter">
            <h2>Count: {count}</h2>
            <button onClick={() => setIsRunning(!isRunning)}>
                {isRunning ? 'Stop' : 'Start'}
            </button>
            <button onClick={() => setCount(0)}>Reset</button>
        </div>
    );
}

// src/components/BuggyUserList.js
function BuggyUserList() {
    const [users, setUsers] = useState([]);
    const [loading, setLoading] = useState(true);
    
    useEffect(() => {
        // Simulate API call
        setTimeout(() => {
            setUsers([
                { id: 1, name: 'John', email: 'john@example.com' },
                { id: 2, name: 'Jane', email: 'jane@example.com' },
                { id: 3, name: 'Bob', email: 'bob@example.com' }
            ]);
            setLoading(false);
        }, 2000);
    }, []);
    
    const deleteUser = (id) => {
        // Bug: Not updating state correctly
        users.filter(user => user.id !== id);
        // Should be: setUsers(users.filter(user => user.id !== id));
    };
    
    if (loading) {
        return <div>Loading...</div>;
    }
    
    return (
        <div className="user-list">
            <h2>Users</h2>
            {users.map(user => (
                <div key={user.id} className="user-item">
                    <span>{user.name}</span>
                    <span>{user.email}</span>
                    <button onClick={() => deleteUser(user.id)}>Delete</button>
                </div>
            ))}
        </div>
    );
}

// Tasks:
// 1. Install React Developer Tools
// 2. Open the application in browser
// 3. Open DevTools and go to React tab
// 4. Identify the bugs using component inspection
// 5. Fix the bugs and verify in DevTools
// 6. Use Profiler to check performance

// Expected bugs to find:
// - useEffect missing dependency array
// - State not updating correctly
// - Unnecessary re-renders
// - Missing key props