Support for React Activity component

[Nayeem-XTREME]

Is there any plan, to implement the React Activity component (https://react.dev/reference/react/Activity) in the app router? Can it bring any benefit during navigation?

[2208Prathamesh]

Hey 👋

So right now, Next.js (even in v15) doesn’t have direct support for React.Activity inside the App Router. The router tracks navigation/rendering states, but it isn’t connected to React’s activity API yet.

But you can still use it manually. Here’s a small example:

'use client';
import { useRouter } from 'next/navigation';
import { useActivity } from 'react';

export default function PageWithActivity() {
  const router = useRouter();
  const activity = useActivity();

  React.useEffect(() => {
    if (!activity.active) {
      // e.g. prefetch next route if user is idle
      router.prefetch('/next');
    }
  }, [activity.active]);

  return <div>{activity.active ? 'Active' : 'Idle'}</div>;
}

[icyJoseph]

Hi yeah this is in the works, but I guess, it has slightly lower prio over other work, and because the feature is still unstable AFAIK. If you grep around the public repo you'll find:

• next.js/packages/next/src/client/components/layout-router.tsx

  Lines 45 to 47 in 94f422e

  	const Activity = process.env.__NEXT_ROUTER_BF_CACHE
  	? (require('react') as typeof import('react')).unstable_Activity
  	: null!

If you follow around there you'll see that this experimental config routerBFCache makes use of the Activity API to "keep previously shown other routes mounted" so that navigating back to them is immediate. This is all experimental still of course, but you can see in the pubic repo that the team has plans or this API.

I should add, that, using that flag, likely opts you into react@experimental, which is something to be aware of.

[Nayeem-XTREME]

Thanks @icyJoseph