![React 19 Features](/images/blog/react-19-features/cover.webp) React is a UI library that makes it possible to create components in a declrative way. Over the years , React team has been pushing incremental upgrades like Hooks,Suspense, Error Boundary , Transition hooks etc.. Now React 19 is here! And it brings some really cool features that make our lives as developers much easier. ## 1. Actions: Make Forms much easier ### The Problem In React 18, when we had to build forms we used to: - Write manual form submit handlers with `onSubmit` - Always add `e.preventDefault()` to prevent page refresh - Extract form values manually with controlled inputs or refs - Handle form submission logic in event handlers - Deal with complex event handling boilerplate That's a lot of boilerplate just to handle form submission! ### React 18 Way (The Old Problem): ```jsx // React 18 - Manual form handling with lots of boilerplate 'use client'; import { useState } from 'react'; export default function ContactFormOld() { const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(null); const [name, setName] = useState(''); const handleSubmit = async (e) => { e.preventDefault(); // 1. Prevent default behavior setIsLoading(true); // 2. Manual loading state setError(null); // 3. Clear previous errors try { const response = await fetch('/api/updateName', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name }) }); if (!response.ok) { throw new Error('Failed to update name'); } // Success handling setName(''); alert('Name updated successfully!'); } catch (err) { setError(err.message); // 4. Manual error handling } finally { setIsLoading(false); // 5. Manual loading cleanup } }; return ( ); } ``` **Problems with React 18 approach:** - ❌ **Event handling boilerplate** - Always need `e.preventDefault()`, manual form submission - ❌ **Manual value extraction** - Extract form values with `e.target.name.value` for each field - ❌ **onSubmit event handlers** - Need to write submit handler functions for every form - ❌ **Form element access** - Must access each form field individually by name - ❌ **Not designed for server actions** - Traditional forms need full JavaScript to work ### The Solution: Actions Actions in React 19 eliminate form submission boilerplate. Instead of writing `onSubmit` handlers with `e.preventDefault()` and manual value extraction, use the `action` prop and React automatically handles form submission and gives a clean FormData. ### React 19 Way (The New Solution): ```jsx // React 19 - Actions handle everything automatically 'use client'; import { useState } from 'react'; // Simulate API call to update name const updateName = async (name) => { await new Promise(resolve => setTimeout(resolve, 1000)); if (Math.random() > 0.8) { throw new Error('Server error, please try again'); } return { success: true, message: `Name updated to: ${name}` }; }; function NameUpdateForm() { const [message, setMessage] = useState(''); const [isLoading, setIsLoading] = useState(false); // React 19 Action - What makes this special: // 1. Use action prop instead of onSubmit // 2. Automatic FormData handling // 3. No need for e.preventDefault() const handleUpdateName = async (formData) => { setIsLoading(true); setMessage(''); try { // FormData automatically extracts form values const name = formData.get('name'); if (!name) { setMessage('❌ Name is required'); return; } const result = await updateName(name); setMessage(`✅ ${result.message}`); // Reset form after success document.getElementById('name-form').reset(); } catch (error) { setMessage(`❌ ${error.message}`); } finally { setIsLoading(false); } }; return (

Update Your Name

{/* Key Improvement: action prop instead of onSubmit */} {/* Status message */} {message &&

{message}

} {/* What Actions Improve */}

🚀 What Actions Improve:

✅ No more e.preventDefault()
✅ Automatic FormData handling
✅ Use action prop instead of onSubmit
✅ Cleaner, more declarative code
✅ Built for progressive enhancement

); } ``` **What Actions solve:** ✅ **No more `e.preventDefault()`** - React handles form submission automatically ✅ **Automatic FormData handling** - `formData.get('name')` extracts values for you ✅ **Use `action` prop instead of `onSubmit`** - More declarative approach ✅ **Built for Server Actions** - Designed to work with server-side form handling ✅ **Cleaner form submission code** - Focus on what should happen, not how --- ## 2. useActionState: Manages form states easily ### The Problem When we submit forms in React 18, we need to manually track multiple states for each form. we end up juggling loading states, error states, success messages - and it gets messy quickly. Each form needs its own collection of useState hooks and complex state management logic. ### React 18 Way (The Old Problem): ```jsx // React 18 - Manual state juggling with multiple useState hooks 'use client'; import { useState } from 'react'; // Same updateName function from Actions example const updateName = async (name) => { await new Promise(resolve => setTimeout(resolve, 1000)); if (Math.random() > 0.8) { throw new Error('Server error, please try again'); } return { success: true, message: `Name updated to: ${name}` }; }; function NameUpdateFormOld() { // 1. Multiple useState hooks for different states const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(null); const [success, setSuccess] = useState(false); const [message, setMessage] = useState(''); const handleSubmit = async (e) => { e.preventDefault(); // 2. Manual state cleanup setIsLoading(true); setError(null); setSuccess(false); setMessage(''); try { // Old way - manually extract values from form elements const name = e.target.name.value; const result = await updateName(name); // 3. Manual success state management setSuccess(true); setMessage(result.message); } catch (err) { // 4. Manual error state management setError(err.message); } finally { // 5. Manual loading state cleanup setIsLoading(false); } }; return ( ); } ``` **Problems with React 18 approach:** - ❌ **Multiple useState hooks** - Need separate hooks for loading, error, success states - ❌ **Manual state cleanup** - Must reset all states before each submission - ❌ **Complex state management** - Coordinating multiple states becomes error-prone - ❌ **State synchronization issues** - Easy to forget to clear previous states - ❌ **Repetitive boilerplate** - Same state pattern repeated for every form ### The Solution: useActionState `useActionState` is like having one smart hook that manages all form states . Instead of juggling multiple useState hooks, we get automatic loading, error, and result state management. ### React 19 Way (The New Solution): ```jsx // React 19 - useActionState handles all form state automatically 'use client'; import { useActionState } from 'react'; // Same updateName function from Actions example const updateName = async (name) => { await new Promise(resolve => setTimeout(resolve, 1000)); if (Math.random() > 0.8) { throw new Error('Server error, please try again'); } return { success: true, message: `Name updated to: ${name}` }; }; // Enhanced action for useActionState - handles previous state const updateNameAction = async (prevState, formData) => { const name = formData.get('name'); // Validation if (!name || name.trim().length === 0) { return { error: 'Name is required', success: false, message: null }; } if (name.trim().length < 2) { return { error: 'Name must be at least 2 characters long', success: false, message: null }; } try { const result = await updateName(name.trim()); return { success: true, message: result.message, error: null }; } catch (error) { return { error: error.message, success: false, message: null }; } }; function ContactFormWithUseActionState() { // React 19 useActionState - One hook manages everything // [state, formAction, isPending] = useActionState(action, initialState) const [state, formAction, isPending] = useActionState(updateNameAction, { error: null, success: false, message: null }); return (

Update Your Name

See how useActionState manages all form states automatically!

{/* useActionState automatically handles form submission */} {/* All states managed by useActionState */} {state.error && (

❌ {state.error}

)} {state.success && state.message && (

✅ {state.message}

)} {/* What useActionState Improves */}

🚀 What useActionState Improves:

✅ Single hook for all form states
✅ Automatic loading state with isPending
✅ Built-in error handling
✅ No manual state cleanup needed
✅ Perfect integration with Actions

); } ``` **What useActionState solves:** ✅ **Single hook for all states** - No more multiple useState hooks cluttering component ✅ **Automatic loading state** - `isPending` tracks form submission automatically ✅ **Built-in error handling** - Errors from action automatically appear in state ✅ **No manual cleanup** - State resets and updates are handled automatically ✅ **Perfect with Actions** - Designed to work seamlessly with form actions --- ## 3. useFormStatus: Smart Buttons That Know What's Happening ### The Problem In React 18, when we have form components that need to know about form submission state (like submit buttons, loading indicators, or progress bars), we run into prop drilling issues. We end up passing loading states down through multiple component layers, which creates tight coupling and makes components harder to reuse. ### React 18 Way (The Old Problem): ```jsx // React 18 - Prop drilling for form submission state 'use client'; import { useState } from 'react'; // Same updateName function from Actions example const updateName = async (name) => { await new Promise(resolve => setTimeout(resolve, 2000)); // Longer delay to see the effect if (Math.random() > 0.8) { throw new Error('Server error, please try again'); } return { success: true, message: `Name updated to: ${name}` }; }; // OLD WAY: Every component needs props passed down function SubmitButton({ isLoading }) { return ( ); } function LoadingBar({ isLoading }) { if (!isLoading) return null; return (

Processing your request...

); } // Main form component - React 18 approach function ContactFormReact18() { const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(null); const [success, setSuccess] = useState(null); const handleSubmit = async (e) => { e.preventDefault(); setIsLoading(true); setError(null); setSuccess(null); try { const formData = new FormData(e.target); const name = formData.get('name'); if (!name || name.trim().length === 0) { setError('Name is required'); return; } if (name.trim().length < 2) { setError('Name must be at least 2 characters long'); return; } const result = await updateName(name.trim()); setSuccess(result.message); e.target.reset(); } catch (error) { setError(error.message); } finally { setIsLoading(false); } }; return (

React 18: Prop Drilling Required

Every component needs loading state passed as props!

); } ``` **Problems with React 18 approach:** - ❌ **Prop drilling everywhere** - Loading state must be passed to every child component - ❌ **Tight coupling** - Components become dependent on parent's state structure - ❌ **Hard to reuse** - Components can't be used without specific props - ❌ **Complex prop management** - Adding new form state requires updating all child components - ❌ **Deep nesting issues** - Deeply nested buttons need props passed through many levels ### The Solution: useFormStatus `useFormStatus` lets any component inside a form automatically "know" what the form is doing. It's like having a direct line of communication between the form and any component inside it. ### React 19 Way (The New Solution): ```jsx // React 19 - useFormStatus eliminates prop drilling 'use client'; import { useActionState } from 'react'; import { useFormStatus } from 'react-dom'; // Same updateName function from Actions and useActionState examples const updateName = async (name) => { await new Promise(resolve => setTimeout(resolve, 2000)); // Longer delay to see the effect if (Math.random() > 0.8) { throw new Error('Server error, please try again'); } return { success: true, message: `Name updated to: ${name}` }; }; // Enhanced action for useActionState const updateNameAction = async (prevState, formData) => { const name = formData.get('name'); if (!name || name.trim().length === 0) { return { error: 'Name is required', success: false, message: null }; } if (name.trim().length < 2) { return { error: 'Name must be at least 2 characters long', success: false, message: null }; } try { const result = await updateName(name.trim()); return { success: true, message: result.message, error: null }; } catch (error) { return { error: error.message, success: false, message: null }; } }; // ============================================== // React 19 useFormStatus - NO PROPS NEEDED! // ============================================== // Smart submit button - automatically knows form status function SubmitButton() { const { pending } = useFormStatus(); // Magic! No props needed return ( ); } // Loading bar - automatically shows/hides based on form status function LoadingBar() { const { pending } = useFormStatus(); // Magic! No props needed if (!pending) return null; return (

Processing your request...

); } // Main form component function ContactFormWithUseFormStatus() { const [state, formAction] = useActionState(updateNameAction, { error: null, success: false, message: null }); return (

useFormStatus: No Prop Drilling

See how components automatically know form status without any props!

{/* Form automatically provides context to ALL children */}

Your Name

{/* Components access form status directly - NO PROPS NEEDED! */} {/* Status messages */} {state.error && (

❌ {state.error}

)} {state.success && state.message && (

✅ {state.message}

)} {/* What useFormStatus Improves */}

🚀 What useFormStatus Improves:

✅ Zero prop drilling - components access form state directly
✅ Perfect reusability - same components work in any form
✅ Clean interfaces - no loading props cluttering component APIs
✅ Automatic updates - components re-render when form state changes

🔄 Code Comparison:

React 18: {'

); } ``` **What useFormStatus solves:** ✅ **Eliminates prop drilling** - Components access form state directly, no props needed ✅ **Self-aware components** - Buttons and indicators automatically know when form is submitting ✅ **Perfect reusability** - Components work in any form without prop dependencies ✅ **Clean interfaces** - No need to pass loading states through component trees ✅ **Works at any level** - Deeply nested components can access form state directly **Key Benefits:** - 🎯 **Zero Props Needed**: Form components become completely self-contained - 🔄 **Automatic Updates**: Components automatically re-render when form state changes - 🧩 **Perfect Reusability**: Same button component works in any form - 🌳 **No Prop Trees**: Eliminates complex prop passing through component hierarchies - ⚡ **Instant Access**: Any component can access form state immediately --- ## 4. useFormState: Advanced Form State Management ### The Problem When building complex forms in React 18, we need to manually coordinate multiple pieces of state: - Form submission loading states - Server validation errors - Success messages and user feedback - Submission history and tracking - State persistence across navigation - URL synchronization for bookmarkable forms This leads to complex useState management, useEffect coordination, and lots of boilerplate code for every form. ### React 18 Way (The Old Problem): ```jsx // React 18 - Manual state coordination with multiple useState hooks 'use client'; import { useState } from 'react'; // Same updateName function from previous examples const updateName = async (name) => { await new Promise(resolve => setTimeout(resolve, 2000)); if (Math.random() > 0.8) { throw new Error('Server error, please try again'); } return { success: true, message: `Name updated to: ${name}` }; }; function ContactFormReact18() { // 1. Multiple useState hooks for different aspects of form state const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(null); const [success, setSuccess] = useState(null); const [submissionHistory, setSubmissionHistory] = useState([]); const handleSubmit = async (e) => { e.preventDefault(); // 2. Manual state coordination setIsLoading(true); setError(null); setSuccess(null); try { const formData = new FormData(e.target); const name = formData.get('name'); // 3. Manual validation if (!name || name.trim().length === 0) { setError('Name is required'); return; } if (name.trim().length < 2) { setError('Name must be at least 2 characters long'); return; } const result = await updateName(name.trim()); setSuccess(result.message); // 4. Manual history management setSubmissionHistory(prev => [...prev, { name: name.trim(), timestamp: new Date().toISOString(), success: true }]); e.target.reset(); } catch (error) { setError(error.message); // 5. Manual error tracking setSubmissionHistory(prev => [...prev, { error: error.message, timestamp: new Date().toISOString(), success: false }]); } finally { // 6. Manual cleanup setIsLoading(false); } }; return (

React 18: Manual State Coordination

{/* Manual state display */} {error &&

❌ {error}

} {success &&

✅ {success}

} {/* Manual submission history */} {submissionHistory.length > 0 && (

Submission History:

{entry.success ? `✅ ${entry.name}` : `❌ ${entry.error}`} - {new Date(entry.timestamp).toLocaleTimeString()}

)}

); } ``` **Problems with React 18 approach:** - ❌ **Multiple useState hooks** - Need separate hooks for loading, errors, success, history - ❌ **Manual state coordination** - Must sync multiple states manually - ❌ **Complex submission tracking** - Manual history and persistence management - ❌ **No URL integration** - Can't bookmark form state or share form URLs - ❌ **State loss on navigation** - Form state is lost when users navigate away ### The Solution: useFormState `useFormState` is like having an advanced form state manager that automatically handles all form-related state, persistence, and even URL integration. It's the evolution of form state management in React. Think of it as: **All Form States + Persistence + URL Sync = useFormState** ### React 19 Way (The New Solution): **Option 1: useFormState + useFormStatus (Complete Solution)** ```jsx // React 19 - useFormState + useFormStatus for complete form management 'use client'; import { useFormState } from 'react-dom'; import { useFormStatus } from 'react-dom'; // Same updateName function from previous examples const updateName = async (name) => { await new Promise(resolve => setTimeout(resolve, 2000)); if (Math.random() > 0.8) { throw new Error('Server error, please try again'); } return { success: true, message: `Name updated to: ${name}` }; }; // Enhanced action for useFormState with automatic state tracking const updateNameAction = async (prevState, formData) => { const name = formData.get('name'); // Validation if (!name || name.trim().length === 0) { return { error: 'Name is required', success: false, message: null, timestamp: new Date().toISOString() }; } if (name.trim().length < 2) { return { error: 'Name must be at least 2 characters long', success: false, message: null, timestamp: new Date().toISOString() }; } try { const result = await updateName(name.trim()); return { success: true, message: result.message, error: null, submittedName: name.trim(), timestamp: new Date().toISOString() }; } catch (error) { return { error: error.message, success: false, message: null, timestamp: new Date().toISOString() }; } }; // Smart submit button with automatic loading state function SmartSubmitButton() { const { pending } = useFormStatus(); // Automatically knows when form is submitting return ( ); } // Smart input field that disables during submission function SmartInputField() { const { pending } = useFormStatus(); // Automatically knows when form is submitting return (

Your Name

); } function ContactFormWithUseFormState() { // useFormState manages form state, useFormStatus handles loading const [state, formAction] = useFormState(updateNameAction, { error: null, success: false, message: null }); return (

React 19: useFormState + useFormStatus

Complete form state management with automatic loading states!

{/* Form components automatically handle loading states */}

); } ``` **Option 2: useActionState (Simpler Alternative)** ```jsx // Alternative: useActionState provides both state and pending in one hook import { useActionState } from 'react'; function ContactFormWithUseActionState() { // Single hook provides state AND loading state const [state, formAction, isPending] = useActionState(updateNameAction, { error: null, success: false, message: null }); return (

React 19: useActionState (Single Hook)

{state.error &&

❌ {state.error}

} {state.success &&

✅ {state.message}

}

); } ``` ### Which Approach to Choose? **useFormState + useFormStatus:** - ✅ More granular control - ✅ Components automatically know form state - ✅ Better for complex forms with many components - ✅ State persistence and URL integration features **useActionState:** - ✅ Simpler API - single hook - ✅ Built-in pending state - ✅ Less code for simple forms - ✅ Direct replacement for useFormState ### What These Approaches Improve: - 🎯 **Complete State Management**: All form state managed automatically - 🔄 **Automatic Loading States**: Buttons and inputs disable during submission - 🧩 **Built-in Error Handling**: Server action errors automatically appear in state - 🌐 **State Persistence**: Form state survives navigation and refreshes - ⚡ **Progressive Enhancement**: Works without JavaScript **What this approach solves:** ✅ **Complete State Management** - useFormState handles data, useFormStatus handles loading ✅ **Automatic Loading States** - Components automatically disable during submission ✅ **Built-in Error Handling** - Server action errors automatically appear in state ✅ **State Persistence** - Form state survives navigation and refreshes ✅ **URL Integration** - Optional URL synchronization for bookmarkable forms ✅ **Progressive Enhancement** - Works without JavaScript ✅ **Zero Prop Drilling** - Components access form state directly **Key Benefits:** - 🎯 **Best of Both Worlds**: Advanced state management + automatic loading states - 🔄 **Smart Components**: Form elements automatically know when to disable - 🧩 **Server Integration**: Built for server actions and progressive enhancement - 🌐 **URL Sync**: Optional URL state for shareable and bookmarkable forms - ⚡ **Zero Configuration**: Works out of the box with any server action **The Complete Solution:** --- ## 5. useOptimistic: Make Instant Feedback ### The Problem We all know that annoying feeling when we click a "Like" button and nothing happens for 2-3 seconds? Then suddenly the heart turns red? This happens because our app waits for the server to confirm response from server before updating the UI. But users expect instant feedback! Just as Instagram or Twitter - when we like a post, it immediately shows as liked, even if our internet is slow. ### The Solution: useOptimistic `useOptimistic` hook allows us to immediately update the UI when we click like, even before the server responds. If something goes wrong (like no internet), React automatically undoes the change. But most of the time, everything works and users feel like our app is super fast. ### Example ```jsx import { useOptimistic, useState } from 'react'; function LikeButton({ postId, initialLikes }) { const [likes, setLikes] = useState(initialLikes); const [optimisticLikes, addLike] = useOptimistic(likes, (count, inc) => count + inc); async function handleClick() { addLike(1); try { await fakeServerLike(postId); setLikes(likes + 1); } catch { // rollback happens automatically } } return ; } ``` --- ## 6. useTransition: Keeps UI Responsive ### The Problem When we have heavy operations like filtering through 10,000 items or complex calculations, then it can freeze UI. Users try to type in an input field, but nothing happens for seconds because JavaScript is busy with the heavy work. User types a --> ap --> app (there is delay after each stroke because filtering of long list) ### React 18 Way (The Old Problem): ```jsx // React 18 - Heavy operations block the UI 'use client'; import { useState } from 'react'; // Large dataset for demonstration const generateItems = () => Array.from({ length: 10000 }, (_, i) => ({ id: i, name: `Item ${i}`, category: ['electronics', 'books', 'clothing', 'home'][i % 4], price: Math.floor(Math.random() * 1000) + 10 })); function ProductSearchOld() { const [query, setQuery] = useState(''); const [isSearching, setIsSearching] = useState(false); const [filteredItems, setFilteredItems] = useState([]); const items = generateItems(); const handleSearch = async (searchTerm) => { setIsSearching(true); // Simulate heavy filtering operation that blocks UI // In real apps, this could be complex calculations, data processing, etc. const filtered = items.filter(item => { // Add artificial delay to simulate heavy computation for (let i = 0; i < 1000; i++) { Math.random(); // Busy work } return item.name.toLowerCase().includes(searchTerm.toLowerCase()) || item.category.toLowerCase().includes(searchTerm.toLowerCase()); }); setFilteredItems(filtered); setIsSearching(false); }; const onInputChange = (e) => { const value = e.target.value; setQuery(value); // This blocks the UI - typing becomes laggy if (value.length > 2) { handleSearch(value); } else { setFilteredItems([]); } }; return (

React 18: UI Blocking Search

Try typing - notice how the input becomes laggy during search!

{isSearching && Searching...}

Found {filteredItems.length} items

{filteredItems.slice(0, 20).map(item => (

{item.name}

Category: {item.category} | Price: ${item.price}

))}

); } ``` **Problems with React 18 approach:** - ❌ **UI Freezing** - Heavy operations block user interactions - ❌ **Laggy Input** - Typing becomes unresponsive during processing - ❌ **Poor UX** - Users can't interact while operations run - ❌ **No Prioritization** - All updates have same urgency - ❌ **Manual Optimization** - Optimization like debounce but it is like introducing artificial delays ### The Solution: useTransition `useTransition` lets us mark certain updates as "non-urgent" so React can prioritize user interactions (like typing) over heavy background work. It's like telling React: "Keep the UI responsive for user interactions, and update the search results when you have time." ### React 19 Way (The New Solution): ```jsx // React 19 - useTransition keeps UI responsive import { useState, useTransition } from 'react'; // Same large dataset const generateItems = () => Array.from({ length: 10000 }, (_, i) => ({ id: i, name: `Item ${i}`, category: ['electronics', 'books', 'clothing', 'home'][i % 4], price: Math.floor(Math.random() * 1000) + 10 })); function ProductSearchWithTransition() { const [query, setQuery] = useState(''); const [filteredItems, setFilteredItems] = useState([]); const [isPending, startTransition] = useTransition(); const items = generateItems(); const handleSearch = (searchTerm) => { // Mark this update as non-urgent with startTransition startTransition(() => { // Same heavy filtering operation, but now non-blocking const filtered = items.filter(item => { // Same artificial delay to simulate heavy computation for (let i = 0; i < 1000; i++) { Math.random(); // Busy work } return item.name.toLowerCase().includes(searchTerm.toLowerCase()) || item.category.toLowerCase().includes(searchTerm.toLowerCase()); }); setFilteredItems(filtered); }); }; const onInputChange = (e) => { const value = e.target.value; // This update is urgent - happens immediately setQuery(value); // This update is non-urgent - won't block typing if (value.length > 2) { handleSearch(value); } else { // Clear results immediately (urgent update) setFilteredItems([]); } }; return (

React 19: useTransition - Responsive UI

Try typing - notice how smooth the input feels even during heavy search!

{isPending && Updating results...}

Found {filteredItems.length} items {isPending && '(updating...)'}

{filteredItems.slice(0, 20).map(item => (

{item.name}

Category: {item.category} | Price: ${item.price}

))}

🚀 What useTransition Achieves:

1. ✅ Responsive Input

Typing stays smooth even during heavy operations:

setQuery(value); // Urgent - happens immediately

2. ✅ Non-blocking Updates

Heavy work happens in background without freezing UI:

startTransition(() => setFilteredItems(filtered));

3. ✅ Automatic Prioritization

React automatically prioritizes user interactions over background updates

4. ✅ Built-in Pending State

Know when transitions are in progress:

const [isPending, startTransition] = useTransition();

); } ``` **What useTransition solves:** ✅ **Responsive UI** - User interactions stay smooth during heavy operations ✅ **Automatic Prioritization** - React prioritizes urgent updates over background work ✅ **Non-blocking Updates** - Heavy computations don't freeze the interface ✅ **Built-in Pending State** - `isPending` tells when transitions are running ✅ **Better UX** - Users can continue interacting while work happens in background --- ## 7. useDeferredValue: Smooth UI with Laggy Values ### The Problem When we have a value that changes rapidly (like search input) and that value triggers expensive rendering (like filtering 10,000 items), every keystroke causes the UI to freeze. The issue is different from useTransition - here the **value itself** changes too fast, and we need a "laggy copy" that updates safely in the background. User types: q → qu → que → quer → query Each keystroke tries to filter the entire list immediately, blocking the UI. ### React 18 Way (The Old Problem): ```jsx // React 18 - Fast-changing values block expensive rendering function ProductFilter() { const [query, setQuery] = useState(''); // This recalculates on EVERY keystroke - blocks UI! const expensiveResults = items.filter(item => { // Heavy computation for each keystroke return item.name.includes(query); }); return (

setQuery(e.target.value)} // Laggy typing! /> {/* Re-renders on every keystroke */}

); } ``` **Problems with React 18 approach:** - ❌ **Keystroke Blocking** - Every character typed triggers expensive rendering - ❌ **Laggy Input** - Input field becomes unresponsive during heavy rendering - ❌ **Wasted Computation** - Calculates results for intermediate values user doesn't want - ❌ **Poor UX** - Users can't type smoothly while list updates ### The Solution: useDeferredValue `useDeferredValue` gives two versions of the same value: - **Immediate value**: Updates instantly (for responsive input) - **Deferred value**: A "laggy copy" that React updates when it has time (for expensive rendering) Think of it as: **"Keep the input snappy, make the expensive stuff wait."** ### React 19 Way (The New Solution): ```jsx // React 19 - useDeferredValue keeps input responsive import { useState, useDeferredValue } from 'react'; function ProductFilterWithDeferred() { const [query, setQuery] = useState(''); const deferredQuery = useDeferredValue(query); // Laggy copy! // Heavy computation uses the deferred (laggy) value const expensiveResults = items.filter(item => { // Only runs when React has time, not on every keystroke! return item.name.includes(deferredQuery); }); return (

setQuery(e.target.value)} // Smooth typing! /> {/* Uses deferred value */}

); } ``` ### When to Use Which? **Use useTransition when:** - ✅ We want to control the state update (e.g., button click, form submit) - ✅ We want to mark specific updates as non-urgent - ✅ We need `isPending` state to show loading indicators **Use useDeferredValue when:** - ✅ A value changes rapidly (e.g., search input, slider) - ✅ That value triggers expensive rendering - ✅ We want the value itself to be "laggy" for performance **What useDeferredValue solves:** ✅ **Responsive Input** - Input field stays smooth even during heavy rendering ✅ **Laggy Copy** - Expensive operations use a delayed version of the value ✅ **Automatic Optimization** - React decides when to update the deferred value ✅ **Less Wasted Work** - Skips intermediate calculations for rapid changes ✅ **Better UX** - Users can type fast while expensive rendering happens safely --- ## 8. use API: Fetch Data Without State or Effects ### The Problem Data fetching in React has always been verbose and error-prone. We need to manage multiple states, handle loading, errors, and side effects manually: #### The Old Way: Manual State Management ```jsx import { useState, useEffect } from 'react'; function TodoList() { const [todos, setTodos] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const fetchTodos = async () => { try { setLoading(true); const response = await fetch('https://jsonplaceholder.typicode.com/todos'); if (!response.ok) throw new Error('Failed to fetch'); const data = await response.json(); setTodos(data.slice(0, 10)); // First 10 todos setError(null); } catch (err) { setError(err.message); setTodos([]); } finally { setLoading(false); } }; fetchTodos(); }, []); if (loading) return

Loading todos...

; if (error) return

Error: {error}

; return (

Todo List (Old Way)

{todos.map(todo => (

{todo.title} {todo.completed ? 'Done' : 'Pending'}

))}

); } ``` **Problems with this approach:** - ❌ **Boilerplate Heavy**: Need `useState` for data, loading, and error states - ❌ **Complex Logic**: Manual error handling and loading state management - ❌ **Race Conditions**: Multiple effects can conflict with each other - ❌ **Repetitive Code**: Same pattern repeated across components ### The Solution: use Hook React 19's `use` hook eliminates all the boilerplate. It's a **declarative data fetcher** that handles loading, errors, and caching automatically. #### The New Way: Pure Declarative Data Fetching ```jsx import { use, useState } from 'react'; // Simple async function - no state management needed const fetchTodos = async () => { const response = await fetch('https://jsonplaceholder.typicode.com/todos'); if (!response.ok) throw new Error('Failed to fetch todos'); const data = await response.json(); return data.slice(0, 10); // Get first 10 todos }; function TodoComponent() { // One line of code does everything! const todos = use(fetchTodos()); return (

Todo List (New Way)

Fetched with React 19 use hook - zero boilerplate!

{todos.map(todo => (

{todo.title} {todo.completed ? 'Done' : 'Pending'}

))}

); } // Main component with button to trigger fetch function TodoApp() { const [showTodos, setShowTodos] = useState(false); return (

{!showTodos ? (

React 19 'use' Hook Demo

Click to see the magic of zero-boilerplate data fetching!

) : ( )}

); } export default TodoApp; ``` ### What the `use` API Solves ✅ **Zero Boilerplate** - No `useState`, `useEffect`, or loading state management ✅ **Automatic Loading** - React handles loading states and suspense automatically ✅ **Built-in Error Handling** - Errors bubble up to the nearest Error Boundary ✅ **Request Deduplication** - Same requests are automatically cached and shared ✅ **Race Condition Free** - React handles request lifecycle and cleanup ✅ **Suspense Integration** - Works seamlessly with React's Suspense boundaries ✅ **Cleaner Code** - Focus on business logic, not data fetching infrastructure ### How It Works: Suspense and Error Boundary Integration **When we call `use(promise)`, React automatically handles:** 1. **Promise Pending** → Component **suspends**, Suspense boundary shows fallback 2. **Promise Resolved** → Component **resumes**, data is returned from `use(promise)` 3. **Promise Rejected** → Component **throws error**, Error Boundary catches it ```jsx // Component with use API function DataComponent() { const data = use(fetchData()); // Suspends until resolved return

{data}

; } // Wrap with boundaries function App() { return ( Something went wrong!}> Loading...}> ); } ``` **The `use` API represents a shift from imperative to declarative data fetching, with more flexibility than traditional React Hooks.** --- ## 9. Server Actions: Directly call a function on Server ### The Problem Usually, when our React app needs to save data, we have to: 1. Write an API endpoint (`/api/save-message`) 2. Make a POST request in our React component 3. Handle loading and error states 4. Deal with CORS, authentication, and all that server stuff ### The Solution: Server Actions With React 19 Server Actions, we can call a server function directly from our component. React automatically manages the request, loading state, error handling. ### Key Server Actions Features: ✅ **Direct Server Calls** - Call server functions directly from client components ✅ **Automatic FormData** - Form data automatically passed to server actions ✅ **Built-in Loading States** - `isPending` tracks submission automatically ✅ **Server-side Validation** - Validate and sanitize data securely on server ✅ **Database Integration** - Direct access to database from server actions ✅ **Progressive Enhancement** - Forms work without JavaScript enabled ✅ **Error Handling** - Return error objects that client automatically displays ✅ **Random Failure Simulation** - Demonstrates real-world error scenarios **How It Works:** 1. **Client Form Submit** → `

` 2. **Server Processing** → `async function updateUserName(prevState, formData)` 3. **Database Operation** → `await db.users.update({ ... })` 4. **Client State Update** → `useActionState` automatically updates UI --- ## 10. React Compiler: Automatic Performance Optimization ### The Problem In React 18 and earlier versions, we had to optimize React apps with `React.memo`, `useMemo`, and `useCallback`? We had to manually wrap components and memoize expensive calculations to prevent unnecessary re-renders. For example, if we have a music player where the playlist name changes, React would re-render ALL child components - even ones that don't need to update: ```jsx import React, { useMemo } from "react"; function MusicPage({ playlistName, tracks }) { // Without useMemo, this runs on every render const favoriteTracks = useMemo(() => { return tracks.filter((t) => t.isFavorite); }, [tracks]); const totalTracks = tracks.length; return ( <> ); } function Heading({ title, total }) { return

🎶 {title} ({total} tracks)

; } // Without React.memo, this re-renders when playlistName changes const TrackList = React.memo(function TrackListComp({ tracks }) { console.log("TrackList rendered"); return (

{t.name}

); }); // Without React.memo, this also re-renders unnecessarily const FavoriteTracks = React.memo(function FavoriteTracksComp({ tracks }) { return (

❤️ Favorites

{t.name}

); }); ``` **The manual optimization burden:** - Wrap components with `React.memo` - Add `useMemo` for expensive calculations - Use `useCallback` for event handlers - Remember dependency arrays - Debug when optimizations break ### The Solution: React Compiler React Compiler is like React’s built-in optimizer. It reads our component code, figures out how data flows, and then adds the performance fixes for us. With React Compiler, we can write simple, readable code and get optimized performance automatically: ```jsx // After React Compiler - NO manual optimizations needed! function MusicPage({ playlistName, tracks }) { // Compiler automatically memoizes this expensive calculation const favoriteTracks = tracks.filter((t) => t.isFavorite); const totalTracks = tracks.length; return ( <> ); } // Compiler automatically prevents unnecessary re-renders function TrackList({ tracks }) { console.log("TrackList rendered"); // Only when tracks actually change! return (

{t.name}

); } // Compiler handles memoization automatically function FavoriteTracks({ tracks }) { return (

❤️ Favorites

{t.name}

); } ``` ### What React Compiler Does Automatically: 1. **Component Memoization**: Automatically wraps components that benefit from memoization 2. **Value Memoization**: Adds `useMemo` for expensive calculations 3. **Callback Memoization**: Adds `useCallback` for event handlers 4. **Smart Analysis**: Only optimizes when it actually helps performance 5. **Zero Runtime Cost**: All optimizations happen at build time ### How to Enable React Compiler **⚠️ Important: React Compiler is currently experimental and requires opt-in** React Compiler is still in development and requires joining the React 19 beta to access. Here's how to get started: 📚 **Official Documentation**: [React Compiler Guide](https://react.dev/learn/react-compiler) 🔧 **Installation Instructions**: [React Compiler Installation](https://react.dev/learn/react-compiler/installation) --- ## Why upgrade to React 19? There are so many optimizations in React 19 , we don't need to optimize and use every feature at once, but gradually upgrade the features. React 19 makes things **easier** and **faster** for developers. | 🔴 **Before React 19** | | 🟢 **After React 19** | |-------------------------|--------|------------------------| | **Forms** needed lots of boilerplate code | | **Actions** handle everything | | **Loading states** were tedious to manage | | **useActionState** does it automatically | | **Form validation** required complex setup | | **useFormState** manages it all seamlessly | | **Optimistic updates** needed complex logic | | **useOptimistic** makes it simple | | **Performance** required manual memoization | | **React Compiler** optimizes automatically | | **Data fetching** meant useState + useEffect | | **use API** eliminates all boilerplate | ---