React Suspense and Concurrent Mode: What to Expect

React’s Concurrent Mode and Suspense are experimental but represent the future of React. Here’s what developers should know as we head into 2020.

What is Concurrent Mode?

Concurrent Mode allows React to work on multiple tasks simultaneously, interrupting less important updates for urgent ones. This means smoother UX during loading and transitions.

Suspense for Data Fetching

// The dream: declarative loading states
function ProfilePage({ id }) {
  return (
    <Suspense fallback={<Spinner />}>
      <ProfileDetails id={id} />
      <Suspense fallback={<PostsGlimmer />}>
        <ProfilePosts id={id} />
      </Suspense>
    </Suspense>
  );
}

useTransition Hook

function Button({ onClick, children }) {
  const [startTransition, isPending] = useTransition({
    timeoutMs: 3000
  });

  return (
    <button 
      disabled={isPending}
      onClick={() => startTransition(() => onClick())}
    >
      {children}
      {isPending && <Spinner />}
    </button>
  );
}

Current Status

Still experimental. Don’t use in production yet. But start learning the concepts – they’ll shape React development this decade.

References

• Concurrent Mode (Experimental)