Special components: Fragment, StrictMode, Suspense, Profiler.
Render multiple children without a wrapper.
const Fragment: ComponentType<{ children?: ReactNode; key?: Key }>;// Long form
<Fragment><Child1 /><Child2 /></Fragment>
// Short syntax
<><Child1 /><Child2 /></>
// With key (required when mapping)
{todos.map(todo => (
<Fragment key={todo.id}>
<Title>{todo.title}</Title>
<Body>{todo.body}</Body>
</Fragment>
))}Development checks for its descendants.
const StrictMode: ComponentType<{ children?: ReactNode }>;<StrictMode>
<App /> {/* Detects unsafe lifecycles, unexpected side effects, etc. */}
</StrictMode>Declarative loading states.
const Suspense: ComponentType<{ children?: ReactNode; fallback?: ReactNode }>;<Suspense fallback={<Loader />}>
<LazyComponent />
</Suspense>
// Nested boundaries
<Suspense fallback={<AppShell />}>
<Nav />
<Suspense fallback={<ContentSkeleton />}>
<MainContent />
</Suspense>
</Suspense>Performance monitoring.
const Profiler: ComponentType<{
id: string;
onRender?: (id, phase, actualDuration, baseDuration, startTime, commitTime) => void;
children?: ReactNode;
}>;<Profiler id="App" onRender={(id, phase, duration) => {
console.log(`${id} took ${duration}ms`);
}}>
<App />
</Profiler>