React Hooks Explained: useState and useEffect

const [state, setState] = useState(initialValue);

// Examples with different types
const [count, setCount] = useState(0);           // Number
const [name, setName] = useState('');            // String
const [isOpen, setIsOpen] = useState(false);     // Boolean
const [items, setItems] = useState([]);          // Array
const [user, setUser] = useState(null);          // Object or null
const [form, setForm] = useState({               // Object
  username: '',
  email: '',
  password: ''
});

// 1. Direct value update
setCount(5);
setName('John');
setIsOpen(true);

// 2. Functional update (recommended when new state depends on previous)
setCount(prevCount => prevCount + 1);
setItems(prevItems => [...prevItems, newItem]);
setUser(prevUser => ({ ...prevUser, name: 'Jane' }));

// ❌ WRONG - Mutating state directly
user.name = 'Jane';
setUser(user);

// ✅ CORRECT - Creating new object
setUser({ ...user, name: 'Jane' });
// Or with functional update:
setUser(prev => ({ ...prev, name: 'Jane' }));

// ❌ WRONG - Mutating array
items.push(newItem);
setItems(items);

// ✅ CORRECT - Creating new array
setItems([...items, newItem]);
// Or with functional update:
setItems(prev => [...prev, newItem]);

// Removing from array
setItems(prev => prev.filter(item => item.id !== idToRemove));

// Updating item in array
setItems(prev => prev.map(item => 
  item.id === idToUpdate ? { ...item, completed: true } : item
));

// ❌ This runs on every render
const [data, setData] = useState(expensiveComputation());

// ✅ This only runs once on initial render
const [data, setData] = useState(() => expensiveComputation());

// Practical example: reading from localStorage
const [theme, setTheme] = useState(() => {
  const saved = localStorage.getItem('theme');
  return saved ? JSON.parse(saved) : 'dark';
});

useEffect(() => {
  // Effect logic here (runs after render)
  
  return () => {
    // Cleanup logic here (optional)
    // Runs before component unmounts
    // Also runs before effect re-runs
  };
}, [dependencies]); // Dependency array (optional)

// ❌ WRONG - count is used but not in dependencies
function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const id = setInterval(() => {
      console.log(count); // Always logs initial value (0)!
    }, 1000);
    return () => clearInterval(id);
  }, []); // Missing 'count' dependency
}

// ✅ CORRECT - Use functional update to avoid dependency
function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const id = setInterval(() => {
      setCount(c => c + 1); // Uses latest count via callback
    }, 1000);
    return () => clearInterval(id);
  }, []); // No dependency needed!
}

// ❌ WRONG - Creates new object every render, infinite loop!
function SearchResults({ query }) {
  const [results, setResults] = useState([]);
  
  const options = { query, limit: 10 }; // New object each render!

  useEffect(() => {
    fetchResults(options).then(setResults);
  }, [options]); // Always triggers because options !== options
}

// ✅ CORRECT - Stable dependencies
function SearchResults({ query }) {
  const [results, setResults] = useState([]);
  const limit = 10;

  useEffect(() => {
    fetchResults({ query, limit }).then(setResults);
  }, [query, limit]); // Primitive values are stable
}

// ✅ ALSO CORRECT - useMemo for complex objects
function SearchResults({ query }) {
  const [results, setResults] = useState([]);
  
  const options = useMemo(() => ({
    query,
    limit: 10
  }), [query]);

  useEffect(() => {
    fetchResults(options).then(setResults);
  }, [options]); // Now stable between renders
}

// ❌ WRONG - Memory leak! Event listener never removed
useEffect(() => {
  window.addEventListener('scroll', handleScroll);
}, []);

// ✅ CORRECT - Always clean up subscriptions/listeners
useEffect(() => {
  window.addEventListener('scroll', handleScroll);
  return () => window.removeEventListener('scroll', handleScroll);
}, []);

// ❌ WRONG - State update on unmounted component
useEffect(() => {
  fetch('/api/data')
    .then(res => res.json())
    .then(data => setData(data)); // May error if unmounted
}, []);

// ✅ CORRECT - Cancel or ignore on unmount
useEffect(() => {
  let isMounted = true;
  
  fetch('/api/data')
    .then(res => res.json())
    .then(data => {
      if (isMounted) setData(data);
    });

  return () => { isMounted = false; };
}, []);

function Dashboard() {
  // Separate concerns into different state variables
  const [user, setUser] = useState(null);
  const [posts, setPosts] = useState([]);
  const [notifications, setNotifications] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  // Effect for user data
  useEffect(() => {
    fetchUser().then(setUser);
  }, []);

  // Effect for posts (depends on user)
  useEffect(() => {
    if (!user) return;
    fetchPosts(user.id).then(setPosts);
  }, [user]);

  // Effect for notifications (polling)
  useEffect(() => {
    if (!user) return;
    
    const fetchNotifs = () => {
      fetchNotifications(user.id).then(setNotifications);
    };
    
    fetchNotifs(); // Initial fetch
    const id = setInterval(fetchNotifs, 30000); // Poll every 30s
    
    return () => clearInterval(id);
  }, [user]);

  // Effect to update loading state
  useEffect(() => {
    if (user && posts.length > 0) {
      setIsLoading(false);
    }
  }, [user, posts]);

  // ... render logic
}

// ❌ WRONG - Hook inside condition
function Form({ isEditing }) {
  if (isEditing) {
    const [value, setValue] = useState(''); // Never do this!
  }
}

// ❌ WRONG - Hook inside loop
function List({ items }) {
  items.forEach(item => {
    useEffect(() => { /* ... */ }); // Never do this!
  });
}

// ✅ CORRECT - Hooks at top level, conditions inside
function Form({ isEditing }) {
  const [value, setValue] = useState('');
  
  useEffect(() => {
    if (isEditing) { // Condition inside hook is fine
      // ... effect logic
    }
  }, [isEditing]);
}

// ✅ CORRECT - For lists, put hook in child component
function List({ items }) {
  return items.map(item => (
    <ListItem key={item.id} item={item} />
  ));
}

function ListItem({ item }) {
  useEffect(() => { /* ... */ }, [item]); // Each instance has its own hook
  return <div>{item.name}</div>;
}

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

  useEffect(() => {
    const controller = new AbortController();
    
    setLoading(true);
    setError(null);
    
    fetch(url, { signal: controller.signal })
      .then(res => {
        if (!res.ok) throw new Error('Request failed');
        return res.json();
      })
      .then(setData)
      .catch(err => {
        if (err.name !== 'AbortError') setError(err);
      })
      .finally(() => setLoading(false));

    return () => controller.abort();
  }, [url]);

  return { data, loading, error };
}

// Usage - so clean!
function UserProfile({ userId }) {
  const { data: user, loading, error } = useApi(`/api/users/${userId}`);

  if (loading) return <Spinner />;
  if (error) return <Error message={error.message} />;
  return <Profile user={user} />;
}

function PostList() {
  const { data: posts, loading } = useApi('/api/posts');
  // ...
}