React 19 Development
React 19 introduces powerful new features for building modern web applications with enhanced server capabilities, improved form handling, and better performance.
Quick Start
Basic Component with Hooks
import { useState, useEffect } from "react";
function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log("Count changed:", count);
}, [count]);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}Custom Hook for API Data
import { useState, useEffect } from "react";
function useApiData(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch(url);
const result = await response.json();
setData(result);
} catch (err) {
setError(err);
} finally {
setLoading(false);
}
};
fetchData();
}, [url]);
return { data, loading, error };
}
// Usage
function UserProfile({ userId }) {
const { data: user, loading, error } = useApiData(`/api/users/${userId}`);
if (loading) return <div>Loading...</div>;
if (error) return <div>Error: {error.message}</div>;
if (!user) return <div>No user found</div>;
return <div>{user.name}</div>;
}React 19 New Features
Server Actions and Forms
// Server action
"use server";
async function updateUser(formData) {
const name = formData.get("name");
const email = formData.get("email");
// Database update logic here
await db.users.update({ name, email });
return { success: true, message: "User updated successfully" };
}
// Client component with form
function UserForm({ user }) {
const [state, formAction, isPending] = useActionState(updateUser, null);
return (
<form action={formAction}>
<input name="name" defaultValue={user.name} />
<input name="email" defaultValue={user.email} />
<button type="submit" disabled={isPending}>
{isPending ? "Updating..." : "Update"}
</button>
{state?.message && <p>{state.message}</p>}
</form>
);
}Form Status Hook
import { useFormStatus } from "react-dom";
function SubmitButton() {
const { pending } = useFormStatus();
return (
<button type="submit" disabled={pending}>
{pending ? "Submitting..." : "Submit"}
</button>
);
}
function ContactForm() {
return (
<form action={submitContact}>
<input name="name" placeholder="Your name" />
<input name="email" placeholder="Your email" />
<SubmitButton />
</form>
);
}Server Components
// Server Component (runs on server)
async function BlogPost({ id }) {
const post = await db.posts.find(id);
return (
<article>
<h1>{post.title}</h1>
<p>{post.content}</p>
<CommentSection postId={post.id} />
</article>
);
}
// Client Component for interactivity
("use client");
function CommentSection({ postId }) {
const [comments, setComments] = useState([]);
const [newComment, setNewComment] = useState("");
const addComment = async () => {
// Client-side logic for adding comments
};
return (
<div>
<h3>Comments</h3>
{/* Comment rendering and form */}
</div>
);
}Common Patterns
State Management with Context
import { createContext, useContext, useState, useReducer } from "react";
// Create context
const AuthContext = createContext();
// Auth provider component
function AuthProvider({ children }) {
const [user, setUser] = useState(null);
const login = async (credentials) => {
// Login logic
setUser(userData);
};
const logout = () => {
setUser(null);
};
return (
<AuthContext.Provider value={{ user, login, logout }}>
{children}
</AuthContext.Provider>
);
}
// Custom hook for consuming context
function useAuth() {
const context = useContext(AuthContext);
if (!context) {
throw new Error("useAuth must be used within AuthProvider");
}
return context;
}
// Usage in components
function Header() {
const { user, logout } = useAuth();
return (
<header>
{user ? (
<div>
<span>Welcome, {user.name}</span>
<button onClick={logout}>Logout</button>
</div>
) : (
<div>Please log in</div>
)}
</header>
);
}Data Fetching with Suspense
import { Suspense } from "react";
// Async component
async function UserList() {
const users = await fetchUsers(); // async function
return (
<ul>
{users.map((user) => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
}
// Using Suspense boundary
function App() {
return (
<div>
<h1>Users</h1>
<Suspense fallback={<div>Loading users...</div>}>
<UserList />
</Suspense>
</div>
);
}Optimistic Updates
import { useState, useTransition } from "react";
function TodoList() {
const [todos, setTodos] = useState(initialTodos);
const [isPending, startTransition] = useTransition();
const addTodo = async (newTodo) => {
// Optimistic update
const optimisticId = Date.now();
startTransition(() => {
setTodos((prev) => [
...prev,
{
id: optimisticId,
text: newTodo,
status: "optimistic",
},
]);
});
try {
const savedTodo = await saveTodo(newTodo);
// Replace optimistic todo with saved one
setTodos((prev) =>
prev.map((todo) => (todo.id === optimisticId ? savedTodo : todo)),
);
} catch (error) {
// Revert optimistic update on error
setTodos((prev) => prev.filter((todo) => todo.id !== optimisticId));
}
};
return (
<div>
<ul>
{todos.map((todo) => (
<li
key={todo.id}
style={{ opacity: todo.status === "optimistic" ? 0.5 : 1 }}
>
{todo.text}
</li>
))}
</ul>
<button onClick={() => addTodo("New task")} disabled={isPending}>
Add Todo
</button>
</div>
);
}Error Boundaries
import { Component } from "react";
class ErrorBoundary extends Component {
constructor(props) {
super(props);
this.state = { hasError: false, error: null };
}
static getDerivedStateFromError(error) {
return { hasError: true, error };
}
componentDidCatch(error, errorInfo) {
console.error("Error caught by boundary:", error, errorInfo);
}
render() {
if (this.state.hasError) {
return (
<div>
<h2>Something went wrong</h2>
<details>{this.state.error?.message}</details>
</div>
);
}
return this.props.children;
}
}
// Usage
function App() {
return (
<ErrorBoundary>
<MyComponent />
</ErrorBoundary>
);
}Performance Patterns
Memoization with useMemo and useCallback
import { useState, useMemo, useCallback } from "react";
function ExpensiveComponent({ data, onItemClick }) {
const [filter, setFilter] = useState("");
// Memoize expensive computation
const filteredData = useMemo(() => {
console.log("Filtering data...");
return data.filter((item) =>
item.name.toLowerCase().includes(filter.toLowerCase()),
);
}, [data, filter]);
// Memoize event handler
const handleItemClick = useCallback(
(item) => {
onItemClick(item);
},
[onItemClick],
);
return (
<div>
<input
value={filter}
onChange={(e) => setFilter(e.target.value)}
placeholder="Filter items..."
/>
<ul>
{filteredData.map((item) => (
<li key={item.id} onClick={() => handleItemClick(item)}>
{item.name}
</li>
))}
</ul>
</div>
);
}Code Splitting with lazy loading
import { lazy, Suspense } from "react";
// Lazy load component
const AdminDashboard = lazy(() => import("./AdminDashboard"));
function App() {
const [isAdmin, setIsAdmin] = useState(false);
return (
<div>
<h1>My App</h1>
<button onClick={() => setIsAdmin(true)}>Admin View</button>
{isAdmin && (
<Suspense fallback={<div>Loading admin dashboard...</div>}>
<AdminDashboard />
</Suspense>
)}
</div>
);
}Best Practices
Component Structure
// Good: Single responsibility components
function UserAvatar({ user, size = "medium" }) {
return (
<img
src={user.avatar}
alt={user.name}
className={`avatar avatar-${size}`}
/>
);
}
function UserCard({ user }) {
return (
<div className="user-card">
<UserAvatar user={user} size="large" />
<h3>{user.name}</h3>
<p>{user.email}</p>
</div>
);
}Prop Types and Default Values
import PropTypes from "prop-types";
function Button({
children,
variant = "primary",
size = "medium",
onClick,
disabled = false,
}) {
const className = `btn btn-${variant} btn-${size}`;
return (
<button className={className} onClick={onClick} disabled={disabled}>
{children}
</button>
);
}
Button.propTypes = {
children: PropTypes.node.isRequired,
variant: PropTypes.oneOf(["primary", "secondary", "danger"]),
size: PropTypes.oneOf(["small", "medium", "large"]),
onClick: PropTypes.func,
disabled: PropTypes.bool,
};Requirements
- React 19.0 or higher
- Node.js 18+ (for development)
- Modern browser with ES6+ support
Dependencies for Full React 19 Experience
npm install react@19 react-dom@19Recommended Development Tools
npm install --save-dev @types/react @types/react-domCommon Additional Libraries
- State Management:
zustand,jotai, or Context API - Routing:
react-router-dom - Data Fetching:
@tanstack/react-query - Form Handling: Built-in React 19 forms or
react-hook-form - Styling:
tailwindcss,styled-components, or CSS modules