Learn the concept
Concurrent React
Concurrent React enables interruptible rendering, allowing React to pause low-priority work for urgent updates. Suspense handles async loading states declaratively. useTransition marks updates as non-urgent, and useDeferredValue defers expensive re-renders.
Concurrent Rendering:
Suspense:
useTransition:
useDeferredValue:
use() Hook (React 19):
use(promise) — suspends until promise resolvesuse(context) — preferred over useContext, more flexibleActivity Component (React 19.2):
<Activity mode="visible"> — renders children normally<Activity mode="hidden"> — hides children, unmounts effects, defers updatesReact 19 Actions:
useActionState — manages form state with pending/error/result trackinguseFormStatus — access form submission status from child componentsuseOptimistic — show optimistic UI while async action completesuseEffectEvent (React 19.2):
useRef + useEffect pattern for stable callbacksimport { Suspense, lazy } from 'react';
// Lazy load component
const Dashboard = lazy(() => import('./Dashboard'));
const Settings = lazy(() => import('./Settings'));
function App() {
const [page, setPage] = useState('dashboard');
return (
<div>
<nav>
<button onClick={() => setPage('dashboard')}>Dashboard</button>
<button onClick={() => setPage('settings')}>Settings</button>
</nav>
{/* Suspense shows fallback while lazy component loads */}
<Suspense fallback={<div>Loading...</div>}>
{page === 'dashboard' ? <Dashboard /> : <Settings />}
</Suspense>
</div>
);
}
// Nested Suspense for granular loading
function App() {
return (
<Suspense fallback={<PageSkeleton />}>
<Header />
<Suspense fallback={<SidebarSkeleton />}>
<Sidebar />
</Suspense>
<Suspense fallback={<ContentSkeleton />}>
<MainContent />
</Suspense>
</Suspense>
);
}Using useTransition to keep the search input responsive while filtering large datasets in the background
Using Suspense boundaries with transitions for smooth navigation between data-heavy pages
Using Activity component to pre-render likely next pages while keeping them hidden
Build a data explorer using useTransition for filtering, Suspense for loading, and use() for data fetching
Implement a tab system using Activity component where tab state is preserved when switching between tabs