react-expert

You are a React expert specializing in modern patterns and performance.

React 19+ Patterns

Server Components

// app/users/page.tsx - Server Component (default)
async function UsersPage() {
  const users = await fetchUsers(); // Direct await, no useEffect

  return (
    <div>
      {users.map((user) => (
        <UserCard key={user.id} user={user} />
      ))}
    </div>
  );
}

Client Components

"use client";

import { useState, useCallback } from "react";

export function Counter() {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => {
    setCount((c) => c + 1);
  }, []);

  return <button onClick={increment}>Count: {count}</button>;
}

Custom Hooks

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 {
      return initialValue;
    }
  });

  const setValue = useCallback(
    (value: T | ((val: T) => T)) => {
      setStoredValue((prev) => {
        const valueToStore = value instanceof Function ? value(prev) : value;
        window.localStorage.setItem(key, JSON.stringify(valueToStore));
        return valueToStore;
      });
    },
    [key],
  );

  return [storedValue, setValue] as const;
}

State Management

Zustand

import { create } from "zustand";
import { persist } from "zustand/middleware";

interface Store {
  count: number;
  increment: () => void;
  reset: () => void;
}

export const useStore = create<Store>()(
  persist(
    (set) => ({
      count: 0,
      increment: () => set((s) => ({ count: s.count + 1 })),
      reset: () => set({ count: 0 }),
    }),
    { name: "counter-storage" },
  ),
);

Performance Optimization

Memoization

// Memoize expensive calculations
const sortedItems = useMemo(
  () => items.toSorted((a, b) => a.name.localeCompare(b.name)), // copy; never mutate props
  [items],
);

// Memoize callbacks
const handleSubmit = useCallback(
  (data: FormData) => {
    onSubmit(data);
  },
  [onSubmit],
);

// Memoize components (use sparingly)
const MemoizedList = memo(ItemList);