import React, { useState, useEffect } from 'react';

// useState for managing component state
function Counter() {
    const [count, setCount] = useState(0);
    const [name, setName] = useState('');

    // Object state
    const [user, setUser] = useState({ name: '', email: '' });

    const updateUser = (field, value) => {
        setUser(prev => ({ ...prev, [field]: value }));
    };

    return (
        <div>
            <h2>Count: {count}</h2>
            <button onClick={() => setCount(count + 1)}>
                Increment
            </button>
            <button onClick={() => setCount(prev => prev - 1)}>
                Decrement
            </button>

            <input
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder="Enter name"
            />
        </div>
    );
}

import React, { useState, useEffect } from 'react';

function UserProfile({ userId }) {
    const [user, setUser] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    // Effect with cleanup
    useEffect(() => {
        let cancelled = false;

        const fetchUser = async () => {
            try {
                setLoading(true);
                const response = await fetch(`/api/users/${userId}`);
                const userData = await response.json();

                if (!cancelled) {
                    setUser(userData);
                    setError(null);
                }
            } catch (err) {
                if (!cancelled) {
                    setError(err.message);
                }
            } finally {
                if (!cancelled) {
                    setLoading(false);
                }
            }
        };

        fetchUser();

        // Cleanup function
        return () => {
            cancelled = true;
        };
    }, [userId]); // Dependency array

    // Effect for document title
    useEffect(() => {
        if (user) {
            document.title = `Profile: ${user.name}`;
        }

        return () => {
            document.title = 'My App';
        };
    }, [user]);

    if (loading) return <div>Loading...</div>;
    if (error) return <div>Error: {error}</div>;
    if (!user) return <div>User not found</div>;

    return (
        <div>
            <h1>{user.name}</h1>
            <p>{user.email}</p>
        </div>
    );
}

import { useState, useEffect } from 'react';

// Custom hook for API data fetching
function useApi(url) {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        const fetchData = async () => {
            try {
                setLoading(true);
                const response = await fetch(url);
                const result = await response.json();
                setData(result);
                setError(null);
            } catch (err) {
                setError(err.message);
            } finally {
                setLoading(false);
            }
        };

        if (url) {
            fetchData();
        }
    }, [url]);

    return { data, loading, error };
}

// Custom hook for local storage
function useLocalStorage(key, initialValue) {
    const [storedValue, setStoredValue] = useState(() => {
        try {
            const item = window.localStorage.getItem(key);
            return item ? JSON.parse(item) : initialValue;
        } catch (error) {
            console.error('Error reading from localStorage:', error);
            return initialValue;
        }
    });

    const setValue = (value) => {
        try {
            setStoredValue(value);
            window.localStorage.setItem(key, JSON.stringify(value));
        } catch (error) {
            console.error('Error saving to localStorage:', error);
        }
    };

    return [storedValue, setValue];
}

// Using custom hooks
function TodoApp() {
    const [todos, setTodos] = useLocalStorage('todos', []);
    const { data: users, loading } = useApi('/api/users');

    const addTodo = (text) => {
        const newTodo = {
            id: Date.now(),
            text,
            completed: false
        };
        setTodos(prev => [...prev, newTodo]);
    };

    return (
        <div>
            <h1>Todo App</h1>
            {/* Todo implementation */}
        </div>
    );
}