React 19 & Next.js 15
Complete Feature Showcase
RecipEase demonstrates ALL the cutting-edge features of React 19 and Next.js 15 in a real-world application. Every feature listed below is actively implemented and working in this app!
⚛️ React 19 Features
🚀 useOptimistic
Click any ❤️ like button on recipes to see instant UI updates without loading spinners!
addOptimistic(!isLiked) // Instant feedback!⚡ useTransition
Delete your own recipes to see loading states for heavy operations.
startTransition(() => deleteRecipe())📎 Ref as Prop
No more forwardRef! Buttons accept ref as regular props.
<button ref={myRef} /> // No forwardRef!📝 useActionState
Modern form handling with server actions and built-in states.
useActionState(serverAction, initialState)🎯 Enhanced use() API
Cleaner context consumption without Consumer components.
const user = use(UserContext); // Clean!📋 useFormStatus
Track form submission state automatically.
const {pending} = useFormStatus()📄 Document Metadata
Direct metadata in components, no Head needed!
<title>Recipe Title</title>🔄 Actions & Transitions
Built-in async operation handling.
action={formAction} Auto handling🖥️ React Server Components
Server-side rendering with zero JS bundle.
Server Component by default🌊 Streaming
Progressive page loading with Suspense.
<Suspense fallback=<Loading/>>⚡ Server Functions
Direct server function calls from client.
"use server" // Server function🚀 Next.js 15 Features
🔄 Async Request APIs
Async params, searchParams and cookies support.
const params = await params💾 Caching Semantics
Improved caching with force-cache strategy.
cache: 'force-cache'🤝 React 19 Integration
Deep integration with all React 19 features.
'react': '19.0.0'⚡ Turbopack
Ultra-fast bundler for development.
--turbo flag available📊 Static Indicator
Visual indicators for static/dynamic routes.
Static/Dynamic indicators📝 next/form
Enhanced form component with built-in features.
import Form from 'next/form'📘 TypeScript Support
Enhanced TS support with next.config.ts.
next.config.ts // TypeScript config🔒 Secure Server Actions
Enhanced security for server actions.
Automatic CSRF protection🔍 ESLint 9
Latest ESLint with improved rules.
eslint.config.mjs // Flat config