🔗 Combining Hooks — Building Complex Logic

Combine multiple Hooks to build powerful, reusable component logic.

🎯 Combining useState and useEffect

Use useState for state and useEffect for effects. Together they handle most component needs.

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    setLoading(true);
    fetch(`/api/users/${userId}`)
      .then(r => r.json())
      .then(setUser)
      .catch(setError)
      .finally(() => setLoading(false));
  }, [userId]);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;

  return <div>{user.name}</div>;
}

💡 Custom Hook Composition

Combine Hooks in custom Hooks to create complex, reusable logic.

// Combines useState and useEffect
function useFetch(url) {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(r => r.json())
      .then(setData)
      .catch(setError);
  }, [url]);

  return { data, error };
}

// Usage
function App() {
  const { data, error } = useFetch('/api/data');
  return <div>{data && <p>{data.name}</p>}</div>;
}

📊 Summary

🔑 Key Takeaways

• ✅ Combine Hooks for powerful logic

• ✅ useState for state, useEffect for effects

• ✅ Custom Hooks encapsulate combinations

• ✅ Build reusable, testable logic

• ✅ Simplify components with Hooks

• ✅ Share logic across components

Ready to practice? Challenges