React Design Patterns and Best Practices for 2025

Explore modern React patterns, best practices, and ecosystem updates for 2025. Learn about function components, custom hooks, TypeScript integration, React 19 features, modern frameworks, and component libraries that help you build robust and maintainable applications.

🧩 Modern Component Patterns

Function components aren't just the "new way" — they're the ONLY way you should be writing React in 2025! 🎉 This paradigm shift toward functional programming makes your code simpler, more composable, and honestly? Way more fun to write.

🔴 Impact: CRITICAL — This is the foundation of everything else — if you're still writing class components, it's time to make the switch! 🚀

📋 In this section: Function Components • useState & useEffect • Async Data Fetching • Loading & Error States

tsx

// Mock data for preview
const MOCK_USER = { name: "Jane", email: "jane@example.com" };
const fetchUserData = () => Promise.resolve(MOCK_USER);
const LoadingSpinner = () => <p>Loading...</p>;
const ErrorMessage = ({ message }: { message: string }) => <p style={{ color: '#f87171' }}>{message}</p>;

function UserProfile({ userId }: { userId: string }) {
  const [user, setUser] = useState<typeof MOCK_USER | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function load() {
      setLoading(true);
      try {
        const userData = await fetchUserData();
        setUser(userData);
      } catch (error) {
        console.error("Failed to fetch user data:", error);
      } finally {
        setLoading(false);
      }
    }
    load();
  }, [userId]);

  if (loading) return <LoadingSpinner />;
  if (!user) return <ErrorMessage message="User not found" />;

  return (
    <div className="user-profile">
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}

function App() { return <UserProfile userId="1" />; }
export default App;

Preview

Console

🪝 Custom Hooks for Logic Reusability

Custom hooks are like superpowers for your components! 💪 Extract stateful logic into neat, reusable functions and watch your codebase become cleaner, DRY-er, and infinitely more testable. Once you start writing custom hooks, you'll wonder how you ever lived without them.

🔴 Impact: CRITICAL — Custom hooks are the #1 pattern senior devs use to keep components lean and logic reusable. Master this! 🎯

📋 In this section: useFormInput Hook • useLocalStorage Hook • TypeScript Generics with Hooks • Type-Safe State Management

tsx

function useFormInput(initialValue: string) {
  const [value, setValue] = useState(initialValue);
  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
    setValue(e.target.value);
  }
  return {
    value,
    onChange: handleChange,
    reset: () => setValue(initialValue),
  };
}

function LoginForm() {
  const email = useFormInput("");
  const password = useFormInput("");

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    email.reset();
    password.reset();
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="email" placeholder="Email" {...email} />
      <input type="password" placeholder="Password" {...password} />
      <button type="submit">Login</button>
    </form>
  );
}

// Advanced: Type-safe custom hook with generics
function useLocalStorage<T>(key: string, initialValue: T): [T, (value: T) => void] {
  const [storedValue, setStoredValue] = useState<T>(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error(error);
      return initialValue;
    }
  });

  const setValue = (value: T) => {
    try {
      setStoredValue(value);
      window.localStorage.setItem(key, JSON.stringify(value));
    } catch (error) {
      console.error(error);
    }
  };

  return [storedValue, setValue];
}

// Usage with type inference
interface UserPrefs {
  theme: 'light' | 'dark';
  notifications: boolean;
  fontSize: 'small' | 'medium' | 'large';
}

function UserPreferences() {
  // TypeScript infers that preferences is of type UserPrefs
  const [preferences, setPreferences] = useLocalStorage<UserPrefs>('userPrefs', {
    theme: 'light',
    notifications: true,
    fontSize: 'medium'
  });

  return (
    <div>
      <h2>User Preferences</h2>
      <label>
        Theme:
        <select
          value={preferences.theme}
          onChange={(e) => setPreferences({
            ...preferences,
            theme: e.target.value as 'light' | 'dark'
          })}
        >
          <option value="light">Light</option>
          <option value="dark">Dark</option>
        </select>
      </label>
    </div>
  );
}

function App() { return <UserPreferences />; }
export default App;

Preview

Console

🌐 Context API for Application-Wide State

Say goodbye to prop drilling nightmares! 🎉 The Context API has evolved into a seriously powerful tool for managing global state — and with React 19's shiny new use() function, it's more flexible than ever. No more Redux boilerplate for simple shared state!

🟠 Impact: HIGH — Context is the go-to for themes, auth, and i18n — skip it and you'll drown in prop drilling! 🏊

📋 In this section: createContext • ThemeProvider Pattern • React 19's use() API • Conditional Context Access

tsx

import { createContext, useState, use } from 'react';

// Creating a context
const ThemeContext = createContext<{
  theme: "light" | "dark";
  toggleTheme: () => void;
}>({
  theme: "light",
  toggleTheme: () => {},
});

// Provider component
function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [theme, setTheme] = useState<"light" | "dark">("light");

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light"));
  };

  const value = { theme, toggleTheme };

  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
}

// Using context with the new 'use' API in React 19
function ThemedButton({ variant }: { variant: "primary" | "secondary" }) {
  // We can use the 'use' function in conditional blocks
  if (variant === "primary") {
    const { theme, toggleTheme } = use(ThemeContext);

    return (
      <button className={`btn-${variant} ${theme}`} onClick={toggleTheme}>
        Toggle Theme
      </button>
    );
  }

  return <button className={`btn-${variant}`}>Regular Button</button>;
}

// App setup
function App() {
  return (
    <ThemeProvider>
      <ThemedButton variant="primary" />
      <ThemedButton variant="secondary" />
    </ThemeProvider>
  );
}

Preview

Console

🔷 TypeScript Integration

TypeScript + React = a match made in developer heaven! 💙 Catch bugs before they reach production, enjoy autocomplete that actually works, and write code that documents itself. In 2025, starting a React project without TypeScript is like driving without a seatbelt.

🟠 Impact: HIGH — TypeScript catches bugs at compile time that would otherwise crash your app at 3 AM. Your future self will thank you! 🙏

📋 In this section: Type-Safe Props • Generic Components • Union Types • Interface Composition

tsx

// Type-Safe Components and Props
interface UserCardProps {
  user: {
    id: number;
    name: string;
    email: string;
    role: "admin" | "user" | "guest";
    profileImage?: string;
  };
  onEdit?: (userId: number) => void;
  variant?: "compact" | "detailed";
}

// Type-safe component
function UserCard({ user, onEdit, variant = "detailed" }: UserCardProps) {
  return (
    <div className={`user-card ${variant}`}>
      {user.profileImage && (
        <img src={user.profileImage} alt={`${user.name}'s profile`} />
      )}

      <h3>{user.name}</h3>
      {variant === "detailed" && (
        <>
          <p>{user.email}</p>
          <p>Role: {user.role}</p>
        </>
      )}

      {onEdit && <button onClick={() => onEdit(user.id)}>Edit</button>}
    </div>
  );
}

// Generic Components for Maximum Reusability
interface SelectProps<T> {
  items: T[];
  selectedItem: T | null;
  onSelect: (item: T) => void;
  getDisplayText: (item: T) => string;
  getItemKey: (item: T) => string | number;
}

function Select<T>({
  items,
  selectedItem,
  onSelect,
  getDisplayText,
  getItemKey
}: SelectProps<T>) {
  return (
    <div className="select-container">
      <div className="selected-item">
        {selectedItem ? getDisplayText(selectedItem) : 'Select an item'}
      </div>

      <ul className="items-list">
        {items.map(item => (
          <li
            key={getItemKey(item)}
            className={item === selectedItem ? 'selected' : ''}
            onClick={() => onSelect(item)}
          >
            {getDisplayText(item)}
          </li>
        ))}
      </ul>
    </div>
  );
}

// Usage with different data types
interface User {
  id: number;
  name: string;
  email: string;
}

function UserSelector() {
  const [selectedUser, setSelectedUser] = useState<User | null>(null);
  const users: User[] = [
    { id: 1, name: 'John Doe', email: 'john@example.com' },
    { id: 2, name: 'Jane Smith', email: 'jane@example.com' }
  ];

  return (
    <Select<User>
      items={users}
      selectedItem={selectedUser}
      onSelect={setSelectedUser}
      getDisplayText={(user) => user.name}
      getItemKey={(user) => user.id}
    />
  );
}

Preview

Console

🚀 React 19 and Ecosystem Updates

React 19 dropped some absolute bangers! 🔥 New hooks like useOptimistic and useActionState make everyday tasks feel effortless. Forms? Handled. Optimistic UI? Built-in. Server Components? Chef's kiss. This is the most exciting React update in years!

🔴 Impact: CRITICAL — React 19 changes how we build apps fundamentally — these APIs are the future and you need them in your toolkit! ⚡

📋 In this section: useOptimistic Hook • Server Components • useActionState • Form Actions

tsx

import { useOptimistic } from 'react';

// useOptimistic Hook for Immediate UI Updates
function MessageList({ 
  messages, 
  onSendMessage 
}: { 
  messages: Message[]; 
  onSendMessage: (content: string) => Promise<void>;
}) {
  const [optimisticMessages, addOptimisticMessage] = useOptimistic(
    messages,
    (state, newMessage: Message) => [...state, newMessage]
  );

  const handleSubmit = async (formData: FormData) => {
    const content = formData.get("message") as string;

    // Create optimistic version of the message
    const optimisticMessage: Message = {
      id: `temp-${Date.now()}`,
      content,
      status: "sending",
    };

    // Update UI immediately
    addOptimisticMessage(optimisticMessage);

    // Send the actual message
    await onSendMessage(content);
  };

  return (
    <form action={handleSubmit}>
      <input name="message" />
      <button type="submit">Send</button>
      <div className="messages">
        {optimisticMessages.map((message) => (
          <div key={message.id} className={`message ${message.status || ""}`}>
            {message.content}
          </div>
        ))}
      </div>
    </form>
  );
}

// React Server Components Example
// Server Component (runs on server)
async function ProductPage({ productId }: { productId: string }) {
  // Direct server-side data access
  const product = await db.products.findById(productId);

  return (
    <div className="product-page">
      <h1>{product.name}</h1>
      <p className="description">{product.description}</p>
      <p className="price">${product.price.toFixed(2)}</p>

      {/* Client Component for interactivity */}
      <AddToCartButton productId={product.id} />
    </div>
  );
}

// Client Component (marked with "use client")
"use client";
function AddToCartButton({ productId }: { productId: string }) {
  const [isAdding, setIsAdding] = useState(false);

  async function handleAddToCart() {
    setIsAdding(true);
    await addToCart(productId);
    setIsAdding(false);
  }

  return (
    <button onClick={handleAddToCart} disabled={isAdding}>
      {isAdding ? "Adding..." : "Add to Cart"}
    </button>
  );
}

Preview

Console

⚡ Modern Frameworks

Choosing a React framework in 2025 is like picking your starter Pokemon — each one has unique strengths! 🎮 Next.js is the all-rounder, Remix champions web fundamentals, and Vite is the speed demon. Let's break down when to pick each one.

🟠 Impact: HIGH — Your framework choice shapes your entire app architecture — pick wisely and you'll thank yourself for years! 🏗️

📋 In this section: Next.js App Router • Remix Loaders • Vite Configuration • Framework Comparison

tsx

// Next.js App Router Example
// app/products/[id]/page.tsx
export default async function ProductPage({ 
  params 
}: { 
  params: { id: string } 
}) {
  const product = await fetch(`https://api.example.com/products/${params.id}`).then(r => r.json());

  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <p>${product.price}</p>
    </div>
  );
}

// Remix Example with Loader
// app/routes/products.$id.tsx
import { json } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";

export async function loader({ params }: { params: { id: string } }) {
  const product = await fetchProduct(params.id);
  return json({ product });
}

export default function Product() {
  const { product } = useLoaderData<typeof loader>();

  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
    </div>
  );
}

// Vite + React Setup
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    open: true
  }
});

Preview

Console

🎨 Component Libraries and Design Systems

Time to make your apps look gorgeous! 💅 Tailwind CSS has taken the React world by storm with its utility-first approach, and for enterprise-level UIs, libraries like KendoReact give you polished, production-ready components out of the box. Why reinvent the wheel when you can build on greatness?

🔵 Impact: MEDIUM — Great styling accelerates development and delights users — the right library can save you weeks of work! 🎯

📋 In this section: Tailwind CSS Utilities • Product Card Styling • DataGrid Components • Enterprise UI Libraries

tsx

// Tailwind CSS Utility-First Styling
function ProductCard({ product }: { product: Product }) {
  return (
    <div className="bg-white rounded-lg shadow-md overflow-hidden duration-300">
      <img
        src={product.imageUrl}
        alt={product.name}
        className="w-full h-48 object-cover"
      />
      <div className="p-4">
        <h3 className="text-lg font-semibold text-gray-800 mb-2">
          {product.name}
        </h3>
        <p className="text-gray-600 text-sm mb-4">{product.description}</p>
        <div className="flex justify-between items-center">
          <span className="font-bold text-indigo-600">
            ${product.price.toFixed(2)}
          </span>
          <button className="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md">
            Add to Cart
          </button>
        </div>
      </div>
    </div>
  );
}

// Component Library Integration Example
// Using a professional UI library for complex components
import { DataGrid, DataGridColumn } from '@progress/kendo-react-grid';

function UserManagement() {
  const [users, setUsers] = useState<User[]>([]);

  return (
    <DataGrid
      data={users}
      style={{ height: '400px' }}
    >
      <DataGridColumn field="name" title="Name" width="200px" />
      <DataGridColumn field="email" title="Email" width="250px" />
      <DataGridColumn field="role" title="Role" width="150px" />
    </DataGrid>
  );
}

Preview

Console

🏁 Wrap-up: React Best Practices for 2025

🟢 Impact: LOW — A quick cheat sheet to bookmark and revisit whenever you need a refresher! 📌

📋 In this section: Key Takeaways • Best Practices Summary • Quick Reference Guide

1. Function Components: Use function components as the standard. They're simpler, more testable, and enable React's hooks system for state management and lifecycle events.

2. Custom Hooks: Extract reusable stateful logic into custom hooks. This promotes code reuse, separation of concerns, and makes components more focused on rendering.

3. Context API: Use Context API for application-wide state like themes, authentication, and localization. React 19's use() API makes it even more powerful.

4. TypeScript: Adopt TypeScript for type safety, better IDE support, and self-documenting code. Use generics for highly reusable components.

5. React 19 Features: Leverage new hooks like useOptimistic for better UX, and use Server Components to reduce bundle sizes and improve performance.

6. Modern Frameworks: Choose the right framework for your needs—Next.js for comprehensive solutions, Remix for web fundamentals, or Vite for fast development.

7. Styling & Components: Use Tailwind CSS for utility-first styling, and consider professional UI libraries like KendoReact for enterprise-grade components.

// Mock data for preview

const MOCK_USER = { name: "Jane", email: "jane@example.com" };

const fetchUserData = () => Promise.resolve(MOCK_USER);

const LoadingSpinner = () => <p>Loading...</p>;

const ErrorMessage = ({ message }: { message: string }) => <p style={{ color: '#f87171' }}>{message}</p>;

function UserProfile({ userId }: { userId: string }) {

const [user, setUser] = useState<typeof MOCK_USER | null>(null);

const [loading, setLoading] = useState(true);

useEffect(() => {

async function load() {

setLoading(true);

try {

const userData = await fetchUserData();

setUser(userData);

} catch (error) {

console.error("Failed to fetch user data:", error);

} finally {

setLoading(false);

}

load();

}, [userId]);

if (loading) return <LoadingSpinner />;

if (!user) return <ErrorMessage message="User not found" />;

return (

<p>{user.email}</p>

</div>

);

}

function App() { return <UserProfile userId="1" />; }

export default App;

function useFormInput(initialValue: string) {

const [value, setValue] = useState(initialValue);

function handleChange(e: React.ChangeEvent<HTMLInputElement>) {

setValue(e.target.value);

}

return {

value,

onChange: handleChange,

reset: () => setValue(initialValue),

};

}

function LoginForm() {

const email = useFormInput("");

const password = useFormInput("");

function handleSubmit(e: React.FormEvent) {

e.preventDefault();

email.reset();

password.reset();

}

return (

<button type="submit">Login</button>

</form>

);

}

// Advanced: Type-safe custom hook with generics

function useLocalStorage<T>(key: string, initialValue: T): [T, (value: T) => void] {

const [storedValue, setStoredValue] = useState<T>(() => {

try {

const item = window.localStorage.getItem(key);

return item ? JSON.parse(item) : initialValue;

} catch (error) {

console.error(error);

return initialValue;

}

});

const setValue = (value: T) => {

try {

setStoredValue(value);

window.localStorage.setItem(key, JSON.stringify(value));

} catch (error) {

console.error(error);

}

};

return [storedValue, setValue];

}

// Usage with type inference

interface UserPrefs {

theme: 'light' | 'dark';

notifications: boolean;

fontSize: 'small' | 'medium' | 'large';

}

function UserPreferences() {

// TypeScript infers that preferences is of type UserPrefs

const [preferences, setPreferences] = useLocalStorage<UserPrefs>('userPrefs', {

theme: 'light',

notifications: true,

fontSize: 'medium'

});

return (

<div>

<h2>User Preferences</h2>

<label>

Theme:

<select

value={preferences.theme}

onChange={(e) => setPreferences({

...preferences,

theme: e.target.value as 'light' | 'dark'

})}

<option value="light">Light</option>

</select>

</label>

</div>

);

}

function App() { return <UserPreferences />; }

export default App;

import { createContext, useState, use } from 'react';

// Creating a context

const ThemeContext = createContext<{

theme: "light" | "dark";

toggleTheme: () => void;

}>({

theme: "light",

toggleTheme: () => {},

});

// Provider component

function ThemeProvider({ children }: { children: React.ReactNode }) {

const [theme, setTheme] = useState<"light" | "dark">("light");

const toggleTheme = () => {

setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light"));

};

const value = { theme, toggleTheme };

return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;

}

// Using context with the new 'use' API in React 19

function ThemedButton({ variant }: { variant: "primary" | "secondary" }) {

// We can use the 'use' function in conditional blocks

if (variant === "primary") {

const { theme, toggleTheme } = use(ThemeContext);

return (

Toggle Theme

</button>

);

}

return <button className={`btn-${variant}`}>Regular Button</button>;

}

// App setup

function App() {

return (

</ThemeProvider>

);

}

// Type-Safe Components and Props

interface UserCardProps {

user: {

id: number;

name: string;

email: string;

role: "admin" | "user" | "guest";

profileImage?: string;

};

onEdit?: (userId: number) => void;

variant?: "compact" | "detailed";

}

// Type-safe component

function UserCard({ user, onEdit, variant = "detailed" }: UserCardProps) {

return (

{user.profileImage && (

)}

{variant === "detailed" && (

<p>{user.email}</p>

</>

)}

{onEdit && <button onClick={() => onEdit(user.id)}>Edit</button>}

</div>

);

}

// Generic Components for Maximum Reusability

interface SelectProps<T> {

items: T[];

selectedItem: T | null;

onSelect: (item: T) => void;

getDisplayText: (item: T) => string;

getItemKey: (item: T) => string | number;

}

function Select<T>({

items,

selectedItem,

onSelect,

getDisplayText,

getItemKey

}: SelectProps<T>) {

return (

{selectedItem ? getDisplayText(selectedItem) : 'Select an item'}

</div>

{items.map(item => (

<li

key={getItemKey(item)}

className={item === selectedItem ? 'selected' : ''}

onClick={() => onSelect(item)}

{getDisplayText(item)}

</li>

))}

</ul>

</div>

);

}

// Usage with different data types

interface User {

id: number;

name: string;

email: string;

}

function UserSelector() {

const [selectedUser, setSelectedUser] = useState<User | null>(null);

const users: User[] = [

{ id: 1, name: 'John Doe', email: 'john@example.com' },

{ id: 2, name: 'Jane Smith', email: 'jane@example.com' }

];

return (

<Select<User>

items={users}

selectedItem={selectedUser}

onSelect={setSelectedUser}

getDisplayText={(user) => user.name}

getItemKey={(user) => user.id}

);

}

import { useOptimistic } from 'react';

// useOptimistic Hook for Immediate UI Updates

function MessageList({

messages,

onSendMessage

}: {

messages: Message[];

onSendMessage: (content: string) => Promise<void>;

}) {

const [optimisticMessages, addOptimisticMessage] = useOptimistic(

messages,

(state, newMessage: Message) => [...state, newMessage]

);

const handleSubmit = async (formData: FormData) => {

const content = formData.get("message") as string;

// Create optimistic version of the message

const optimisticMessage: Message = {

id: `temp-${Date.now()}`,

content,

status: "sending",

};

// Update UI immediately

addOptimisticMessage(optimisticMessage);

// Send the actual message

await onSendMessage(content);

};

return (

{optimisticMessages.map((message) => (

{message.content}

</div>

))}

</div>

</form>

);

}

// React Server Components Example

// Server Component (runs on server)

async function ProductPage({ productId }: { productId: string }) {

// Direct server-side data access

const product = await db.products.findById(productId);

return (

<h1>{product.name}</h1>

<p className="description">{product.description}</p>

<p className="price">${product.price.toFixed(2)}</p>

{/* Client Component for interactivity */}

</div>

);

}

// Client Component (marked with "use client")

"use client";

function AddToCartButton({ productId }: { productId: string }) {

const [isAdding, setIsAdding] = useState(false);

async function handleAddToCart() {

setIsAdding(true);

await addToCart(productId);

setIsAdding(false);

}

return (

{isAdding ? "Adding..." : "Add to Cart"}

</button>

);

}

// Next.js App Router Example

// app/products/[id]/page.tsx

export default async function ProductPage({

params

}: {

params: { id: string }

}) {

const product = await fetch(`https://api.example.com/products/${params.id}`).then(r => r.json());

return (

<div>

<h1>{product.name}</h1>

<p>{product.description}</p>

<p>${product.price}</p>

</div>

);

}

// Remix Example with Loader

// app/routes/products.$id.tsx

import { json } from "@remix-run/node";

import { useLoaderData } from "@remix-run/react";

export async function loader({ params }: { params: { id: string } }) {

const product = await fetchProduct(params.id);

return json({ product });

}

export default function Product() {

const { product } = useLoaderData<typeof loader>();

return (

<div>

<h1>{product.name}</h1>

<p>{product.description}</p>

</div>

);

}

// Vite + React Setup

// vite.config.ts

import { defineConfig } from 'vite';

import react from '@vitejs/plugin-react';

export default defineConfig({

plugins: [react()],

server: {

port: 3000,

open: true

}

});

// Tailwind CSS Utility-First Styling

function ProductCard({ product }: { product: Product }) {

return (

<img

src={product.imageUrl}

alt={product.name}

className="w-full h-48 object-cover"

{product.name}

</h3>

<p className="text-gray-600 text-sm mb-4">{product.description}</p>

${product.price.toFixed(2)}

</span>

Add to Cart

</button>

</div>

);

}

// Component Library Integration Example

// Using a professional UI library for complex components

import { DataGrid, DataGridColumn } from '@progress/kendo-react-grid';

function UserManagement() {

const [users, setUsers] = useState<User[]>([]);

return (

<DataGrid

data={users}

style={{ height: '400px' }}

</DataGrid>