Modern React Patterns untuk 2025

React terus evolve dan di tahun 2025, ada beberapa pattern yang harus kita kuasai untuk 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 adalah cornerstone dari modern React development. Berikut pattern-pattern yang powerful:

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

Pattern ini memungkinkan kita untuk membuat component yang flexible dan reusable:

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-50 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

Untuk state management di 2025, kita punya 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 dengan 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 untuk 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>
  );
}

Kesimpulan

React patterns di 2025 lebih fokus pada:

• Simplicity: Less boilerplate, more functionality
• Performance: Built-in optimizations
• Developer Experience: Better tooling dan patterns
• Scalability: Component composition dan state management yang lebih baik

Mastering patterns ini akan membuat kita lebih productive dan building aplikasi yang lebih robust!