Modern React Patterns for 2025

React keeps evolving, and in 2025, there are several patterns we need to master for building scalable applications.

Table of Contents

1. Custom Hooks Patterns
2. Compound Components
3. Render Props Evolution
4. State Management
5. Performance Optimization

Custom Hooks Patterns

Custom hooks are the cornerstone of modern React development. Here are powerful patterns you should know:

typescript
// useLocalStorage.ts
import { useState, useEffect } from "react";

function useLocalStorage<T>(key: string, initialValue: T) {
  const [storedValue, setStoredValue] = useState<T>(() => {
    if (typeof window === "undefined") {
      return initialValue;
    }
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.log(error);
      return initialValue;
    }
  });

  const setValue = (value: T | ((val: T) => T)) => {
    try {
      const valueToStore =
        value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      if (typeof window !== "undefined") {
        window.localStorage.setItem(key, JSON.stringify(valueToStore));
      }
    } catch (error) {
      console.log(error);
    }
  };

  return [storedValue, setValue] as const;
}

Compound Components

This pattern allows us to create flexible and reusable components:

tsx
// Modal.tsx
import React, { createContext, useContext, useState } from "react";

interface ModalContextType {
  isOpen: boolean;
  openModal: () => void;
  closeModal: () => void;
}

const ModalContext = createContext<ModalContextType | undefined>(undefined);

function Modal({ children }: { children: React.ReactNode }) {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <ModalContext.Provider
      value={{
        isOpen,
        openModal: () => setIsOpen(true),
        closeModal: () => setIsOpen(false),
      }}
    >
      {children}
    </ModalContext.Provider>
  );
}

function ModalTrigger({ children }: { children: React.ReactNode }) {
  const context = useContext(ModalContext);
  return <div onClick={context?.openModal}>{children}</div>;
}

function ModalContent({ children }: { children: React.ReactNode }) {
  const context = useContext(ModalContext);
  if (!context?.isOpen) return null;

  return (
    <div className="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center">
      <div className="bg-white p-6 rounded-lg max-w-md w-full">{children}</div>
    </div>
  );
}

// Usage
function App() {
  return (
    <Modal>
      <ModalTrigger>
        <button>Open Modal</button>
      </ModalTrigger>
      <ModalContent>
        <h2>Modal Content</h2>
        <p>This is a compound component pattern!</p>
      </ModalContent>
    </Modal>
  );
}

State Management

For state management in 2025, we have several options:

Zustand (Lightweight State Management)

typescript
import { create } from "zustand";

interface UserState {
  user: User | null;
  isLoading: boolean;
  login: (email: string, password: string) => Promise<void>;
  logout: () => void;
}

const useUserStore = create<UserState>((set) => ({
  user: null,
  isLoading: false,
  login: async (email: string, password: string) => {
    set({ isLoading: true });
    try {
      const user = await api.login(email, password);
      set({ user, isLoading: false });
    } catch (error) {
      set({ isLoading: false });
      throw error;
    }
  },
  logout: () => set({ user: null }),
}));

Performance Optimization

React.memo with useCallback

tsx
const ExpensiveComponent = React.memo(({ data, onUpdate }) => {
  const memoizedCallback = useCallback(() => {
    onUpdate(data);
  }, [data, onUpdate]);

  return (
    <div>
      <h3>{data.title}</h3>
      <button onClick={memoizedCallback}>Update</button>
    </div>
  );
});

useDeferredValue for Loading States

tsx
function SearchResults({ query }: { query: string }) {
  const deferredQuery = useDeferredValue(query);
  const results = useMemo(() => searchResults(deferredQuery), [deferredQuery]);

  return (
    <div>
      {query !== deferredQuery && <div>Loading...</div>}
      {results.map((result) => (
        <ResultItem key={result.id} {...result} />
      ))}
    </div>
  );
}

Conclusion

React patterns in 2025 focus more on:

• Simplicity: Less boilerplate, more functionality
• Performance: Built-in optimizations
• Developer Experience: Better tooling and patterns
• Scalability: Better component composition and state management

Mastering these patterns will make us more productive and help us build more robust applications!