What are the key features introduced in React 18?

React 18, released in March 2022, introduced several groundbreaking features focused on performance and user experience:

1. Automatic Batching

Batch multiple state updates together (even in async code) to reduce re-renders.

// Before React 18: Only batched in event handlers
// After React 18: Batched everywhere
setTimeout(() => {
setCount(c => c + 1);
setFlag(f => !f);
// Only 1 re-render in React 18!
}, 1000);

2. Concurrent Features

• useTransition: Mark updates as non-urgent
• useDeferredValue: Defer expensive re-renders
• Suspense on Server: SSR with Suspense support

3. New createRoot API

// Old way (React 17)
ReactDOM.render(<App />, document.getElementById('root'));

// New way (React 18)
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(<App />);

4. Streaming SSR with Suspense

Stream HTML from server and hydrate components as they arrive.

5. New Hooks

• useId: Generate unique IDs for accessibility
• useSyncExternalStore: Subscribe to external stores
• useInsertionEffect: For CSS-in-JS libraries

6. Strict Mode Improvements

Double-invokes effects in development to catch bugs.