// 1. Primitive state
const [count, setCount] = useState(0);
const [name, setName] = useState('');
const [isOpen, setIsOpen] = useState(false);

// 2. Functional update — safe when depending on previous state
const increment = () => setCount(prev => prev + 1);

// PROBLEM with non-functional:
const badDouble = () => {
  setCount(count + 1); // reads stale 'count' from closure
  setCount(count + 1); // same stale value — only increments by 1!
};

// SOLUTION with functional form:
const goodDouble = () => {
  setCount(prev => prev + 1); // queues: count + 1
  setCount(prev => prev + 1); // queues: (count + 1) + 1 = +2 ✓
};

// 3. Object state — spread to update
const [user, setUser] = useState({ name: '', age: 0, email: '' });
const updateName = (name) => setUser(prev => ({ ...prev, name }));

// 4. Lazy initialization — function only runs on first render
const [data, setData] = useState(() => {
  const saved = localStorage.getItem('data'); // expensive on every render
  return saved ? JSON.parse(saved) : [];
});

// 5. Toggling booleans
const toggle = () => setIsOpen(prev => !prev);

// 6. Reset to initial
const INITIAL = { name: '', email: '' };
const [form, setForm] = useState(INITIAL);
const reset = () => setForm(INITIAL);

// 1. Data fetching with cleanup
useEffect(() => {
  let cancelled = false;

  async function loadUser() {
    setLoading(true);
    try {
      const data = await fetchUser(userId);
      if (!cancelled) setUser(data);       // guard against stale response
    } catch (err) {
      if (!cancelled) setError(err.message);
    } finally {
      if (!cancelled) setLoading(false);
    }
  }

  loadUser();
  return () => { cancelled = true; };      // cleanup cancels stale responses
}, [userId]); // re-runs when userId changes

// 2. Event listener with cleanup
useEffect(() => {
  const handleResize = () => setWidth(window.innerWidth);
  window.addEventListener('resize', handleResize);
  return () => window.removeEventListener('resize', handleResize); // cleanup
}, []); // only attach once

// 3. Timer
useEffect(() => {
  const id = setInterval(() => setTick(t => t + 1), 1000);
  return () => clearInterval(id); // cleanup on unmount
}, []);

// 4. Syncing with external library
useEffect(() => {
  const chart = new Chart(canvasRef.current, options);
  return () => chart.destroy(); // cleanup
}, [options]);

// 5. WRONG — async directly in useEffect
useEffect(async () => { // ❌ the cleanup return would be a Promise
  const data = await fetch('/api');
  setData(data);
}, []);

// CORRECT — define async function inside
useEffect(() => {
  (async () => {
    const data = await fetch('/api').then(r => r.json());
    setData(data);
  })();
}, []);

// 1. Create context with type safety
const ThemeContext = createContext(null);

// 2. Provider component
export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('dark');

  const toggle = useCallback(() => {
    setTheme(prev => prev === 'dark' ? 'light' : 'dark');
  }, []);

  // Memoize value to prevent unnecessary re-renders
  const value = useMemo(() => ({ theme, toggle }), [theme, toggle]);

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

// 3. Custom hook — encapsulates usage, validates context is available
export function useTheme() {
  const ctx = useContext(ThemeContext);
  if (!ctx) throw new Error('useTheme must be used within ThemeProvider');
  return ctx;
}

// 4. Consumer component
function Header() {
  const { theme, toggle } = useTheme();

  return (
    <header data-theme={theme}>
      <button onClick={toggle}>
        {theme === 'dark' ? '☀️ Light' : '🌙 Dark'}
      </button>
    </header>
  );
}

// 5. Optimized: split contexts for independent re-renders
const UserDataContext = createContext(null);   // re-renders on user change
const UserActionsContext = createContext(null); // stable — never re-renders

function UserProvider({ children }) {
  const [user, setUser] = useState(null);
  const actions = useMemo(() => ({
    login: (u) => setUser(u),
    logout: () => setUser(null),
  }), []);

  return (
    <UserActionsContext.Provider value={actions}>
      <UserDataContext.Provider value={user}>
        {children}
      </UserDataContext.Provider>
    </UserActionsContext.Provider>
  );
}

// 1. Define action types (TypeScript-style discriminated union)
const initialState = {
  items: [],
  total: 0,
  loading: false,
  error: null,
};

function cartReducer(state, action) {
  switch (action.type) {
    case 'ADD_ITEM': {
      const existing = state.items.find(i => i.id === action.payload.id);
      const items = existing
        ? state.items.map(i =>
            i.id === action.payload.id
              ? { ...i, qty: i.qty + 1 }
              : i
          )
        : [...state.items, { ...action.payload, qty: 1 }];
      return {
        ...state,
        items,
        total: items.reduce((sum, i) => sum + i.price * i.qty, 0),
      };
    }
    case 'REMOVE_ITEM':
      const items = state.items.filter(i => i.id !== action.payload);
      return { ...state, items, total: items.reduce((s,i) => s+i.price*i.qty, 0) };
    case 'SET_LOADING':
      return { ...state, loading: action.payload };
    case 'SET_ERROR':
      return { ...state, error: action.payload, loading: false };
    case 'CLEAR':
      return initialState;
    default:
      throw new Error(`Unknown action: ${action.type}`);
  }
}

function Cart() {
  const [state, dispatch] = useReducer(cartReducer, initialState);

  const addItem = (item) => dispatch({ type: 'ADD_ITEM', payload: item });
  const removeItem = (id) => dispatch({ type: 'REMOVE_ITEM', payload: id });

  return (
    <div>
      {state.items.map(item => (
        <CartItem key={item.id} item={item} onRemove={removeItem} />
      ))}
      <p>Total: ${state.total.toFixed(2)}</p>
      <button onClick={() => dispatch({ type: 'CLEAR' })}>Clear Cart</button>
    </div>
  );
}

// 1. DOM ref — focus an input
function SearchInput({ autoFocus }) {
  const inputRef = useRef(null);

  useEffect(() => {
    if (autoFocus) inputRef.current?.focus();
  }, [autoFocus]);

  const handleClear = () => {
    inputRef.current.value = '';  // for uncontrolled inputs
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="search" placeholder="Search..." />
      <button onClick={handleClear}>Clear</button>
    </div>
  );
}

// 2. Store previous value
function usePrevoius(value) {
  const prevRef = useRef(value);
  useEffect(() => {
    prevRef.current = value; // update after render
  });
  return prevRef.current; // returns value from previous render
}

// 3. Store timer ID (doesn't need to trigger re-render)
function AutoSave({ content }) {
  const timerRef = useRef(null);

  useEffect(() => {
    clearTimeout(timerRef.current);
    timerRef.current = setTimeout(() => save(content), 1000);
    return () => clearTimeout(timerRef.current);
  }, [content]);
}

// 4. Track mounted state (prevent setState after unmount)
function DataFetcher({ url }) {
  const isMountedRef = useRef(true);
  const [data, setData] = useState(null);

  useEffect(() => {
    isMountedRef.current = true;
    fetch(url).then(r => r.json()).then(d => {
      if (isMountedRef.current) setData(d);
    });
    return () => { isMountedRef.current = false; };
  }, [url]);
}

// 5. Scroll to bottom (chat UI)
function Chat({ messages }) {
  const bottomRef = useRef(null);
  useEffect(() => {
    bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [messages]);
  return (
    <div>
      {messages.map(m => <Message key={m.id} message={m} />)}
      <div ref={bottomRef} />
    </div>
  );
}

// useMemo — expensive computation
function UserList({ users, searchTerm, sortBy }) {
  // Recomputes only when users, searchTerm, or sortBy change
  const processedUsers = useMemo(() => {
    console.log('Filtering and sorting...'); // won't spam on every render
    return users
      .filter(u => u.name.toLowerCase().includes(searchTerm.toLowerCase()))
      .sort((a, b) => a[sortBy].localeCompare(b[sortBy]));
  }, [users, searchTerm, sortBy]);

  return <ul>{processedUsers.map(u => <UserRow key={u.id} user={u} />)}</ul>;
}

// useCallback — stable function reference for React.memo child
function Parent() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  // Without useCallback: new function on every Parent re-render
  // → ExpensiveChild re-renders even when count changes but text doesn't
  const handleTextChange = useCallback((newText) => {
    setText(newText);
  }, []); // empty deps — function never changes

  const handleSave = useCallback(() => {
    saveToAPI(text); // text in closure
  }, [text]); // re-created only when text changes

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(c => c + 1)}>+</button>
      {/* Only re-renders when handleTextChange or handleSave changes */}
      <ExpensiveChild
        onTextChange={handleTextChange}
        onSave={handleSave}
      />
    </div>
  );
}

const ExpensiveChild = React.memo(function ExpensiveChild({ onTextChange, onSave }) {
  console.log('ExpensiveChild rendered'); // only when props change
  return (
    <div>
      <input onChange={e => onTextChange(e.target.value)} />
      <button onClick={onSave}>Save</button>
    </div>
  );
});

// 1. useFetch — generic data fetching
function useFetch(url) {
  const [state, setState] = useState({ data: null, loading: true, error: null });

  useEffect(() => {
    let cancelled = false;
    setState({ data: null, loading: true, error: null });

    fetch(url)
      .then(res => {
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        return res.json();
      })
      .then(data => { if (!cancelled) setState({ data, loading: false, error: null }); })
      .catch(error => { if (!cancelled) setState({ data: null, loading: false, error }); });

    return () => { cancelled = true; };
  }, [url]);

  return state;
}

// Usage:
const { data: user, loading, error } = useFetch(`/api/users/${id}`);

// 2. useDebounce — delay value update
function useDebounce(value, delay) {
  const [debounced, setDebounced] = useState(value);
  useEffect(() => {
    const timer = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(timer);
  }, [value, delay]);
  return debounced;
}

// Usage:
const debouncedSearch = useDebounce(searchInput, 300);
useEffect(() => { fetchResults(debouncedSearch); }, [debouncedSearch]);

// 3. useLocalStorage — persist state to localStorage
function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    try {
      const item = localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch { return initialValue; }
  });

  const setStoredValue = useCallback((val) => {
    try {
      const toStore = val instanceof Function ? val(value) : val;
      setValue(toStore);
      localStorage.setItem(key, JSON.stringify(toStore));
    } catch (e) { console.error(e); }
  }, [key, value]);

  return [value, setStoredValue];
}

// 4. useMediaQuery
function useMediaQuery(query) {
  const [matches, setMatches] = useState(
    () => window.matchMedia(query).matches
  );
  useEffect(() => {
    const mq = window.matchMedia(query);
    const handler = (e) => setMatches(e.matches);
    mq.addEventListener('change', handler);
    return () => mq.removeEventListener('change', handler);
  }, [query]);
  return matches;
}

// Usage:
const isMobile = useMediaQuery('(max-width: 768px)');

// Basic React.memo
const UserCard = React.memo(function UserCard({ user, onDelete }) {
  console.log('UserCard rendered:', user.name);
  return (
    <div className="card">
      <h3>{user.name}</h3>
      <button onClick={() => onDelete(user.id)}>Delete</button>
    </div>
  );
});

function UserList({ users }) {
  const [count, setCount] = useState(0);

  // ❌ New function on every render — memo is useless
  const handleDelete = (id) => deleteUser(id);

  // ✅ Stable reference — memo works correctly
  const handleDelete = useCallback((id) => deleteUser(id), []);

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>
      {users.map(user => (
        // When count changes, UserCard WON'T re-render ✓
        <UserCard key={user.id} user={user} onDelete={handleDelete} />
      ))}
    </div>
  );
}

// Custom comparison function (use sparingly)
const Chart = React.memo(
  function Chart({ data, width }) {
    return <canvas>{/* expensive chart render */}</canvas>;
  },
  (prevProps, nextProps) => {
    // Return true to SKIP re-render (props considered equal)
    return prevProps.width === nextProps.width &&
           prevProps.data.length === nextProps.data.length;
    // Warning: this skips render even if data items changed!
  }
);

// 1. Create the context
const TabsContext = createContext(null);

// 2. Parent component manages state
function Tabs({ children, defaultTab }) {
  const [activeTab, setActiveTab] = useState(defaultTab);

  return (
    <TabsContext.Provider value={{ activeTab, setActiveTab }}>
      <div className="tabs">{children}</div>
    </TabsContext.Provider>
  );
}

// 3. Child components consume context
Tabs.List = function TabsList({ children }) {
  return <div className="tabs-list" role="tablist">{children}</div>;
};

Tabs.Tab = function Tab({ value, children }) {
  const { activeTab, setActiveTab } = useContext(TabsContext);
  return (
    <button
      role="tab"
      aria-selected={activeTab === value}
      className={activeTab === value ? 'tab active' : 'tab'}
      onClick={() => setActiveTab(value)}
    >
      {children}
    </button>
  );
};

Tabs.Panel = function TabsPanel({ value, children }) {
  const { activeTab } = useContext(TabsContext);
  if (activeTab !== value) return null;
  return <div role="tabpanel">{children}</div>;
};

// 4. Usage — expressive, flexible API
<Tabs defaultTab="profile">
  <Tabs.List>
    <Tabs.Tab value="profile">Profile</Tabs.Tab>
    <Tabs.Tab value="settings">Settings</Tabs.Tab>
    <Tabs.Tab value="billing">Billing</Tabs.Tab>
  </Tabs.List>

  <Tabs.Panel value="profile"><ProfileForm /></Tabs.Panel>
  <Tabs.Panel value="settings"><SettingsForm /></Tabs.Panel>
  <Tabs.Panel value="billing"><BillingInfo /></Tabs.Panel>
</Tabs>

// Error boundaries must be class components
class ErrorBoundary extends React.Component {
  state = { hasError: false, error: null };

  // Called during render when a child throws
  // Returns new state to display fallback UI
  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  // Called after render — good for logging
  componentDidCatch(error, info) {
    console.error('Caught error:', error);
    console.error('Component stack:', info.componentStack);
    // Send to error monitoring service
    Sentry.captureException(error, { extra: info });
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback || (
        <div className="error-ui">
          <h2>Something went wrong.</h2>
          <button onClick={() => this.setState({ hasError: false, error: null })}>
            Try again
          </button>
        </div>
      );
    }
    return this.props.children;
  }
}

// Usage — wrap feature sections
function App() {
  return (
    <ErrorBoundary fallback={<AppCrashed />}>
      <Header />
      <ErrorBoundary fallback={<WidgetError />}>
        <Dashboard />
      </ErrorBoundary>
      <ErrorBoundary fallback={<SidebarError />}>
        <Sidebar />
      </ErrorBoundary>
    </ErrorBoundary>
  );
}

// react-error-boundary library (recommended)
import { ErrorBoundary } from 'react-error-boundary';

function ErrorFallback({ error, resetErrorBoundary }) {
  return (
    <div>
      <p>Error: {error.message}</p>
      <button onClick={resetErrorBoundary}>Retry</button>
    </div>
  );
}

<ErrorBoundary FallbackComponent={ErrorFallback} onReset={() => refetch()}>
  <DataComponent />
</ErrorBoundary>

import { createPortal } from 'react-dom';

function Modal({ isOpen, onClose, title, children }) {
  // Scroll lock
  useEffect(() => {
    if (isOpen) document.body.style.overflow = 'hidden';
    return () => { document.body.style.overflow = ''; };
  }, [isOpen]);

  // Close on Escape key
  useEffect(() => {
    const handler = (e) => { if (e.key === 'Escape') onClose(); };
    if (isOpen) document.addEventListener('keydown', handler);
    return () => document.removeEventListener('keydown', handler);
  }, [isOpen, onClose]);

  if (!isOpen) return null;

  // Renders to document.body — escapes any overflow:hidden parent
  return createPortal(
    <div
      className="modal-overlay"
      onClick={onClose}               // click backdrop to close
    >
      <div
        className="modal-content"
        onClick={e => e.stopPropagation()}  // don't close on content click
        role="dialog"
        aria-modal="true"
        aria-labelledby="modal-title"
      >
        <h2 id="modal-title">{title}</h2>
        <button onClick={onClose} aria-label="Close">✕</button>
        {children}
      </div>
    </div>,
    document.body   // target DOM node
  );
}

// Usage
function App() {
  const [showModal, setShowModal] = useState(false);
  return (
    <div style={{ overflow: 'hidden' }}> {/* Portal escapes this */}
      <button onClick={() => setShowModal(true)}>Open Modal</button>
      <Modal isOpen={showModal} onClose={() => setShowModal(false)} title="Confirm">
        <p>Are you sure?</p>
        <button onClick={() => setShowModal(false)}>Confirm</button>
      </Modal>
    </div>
  );
}

import { forwardRef, useImperativeHandle, useRef } from 'react';

// 1. forwardRef — expose the inner input's DOM node
const Input = forwardRef(function Input({ label, ...props }, ref) {
  return (
    <div className="input-wrapper">
      <label>{label}</label>
      <input ref={ref} {...props} />  {/* ref forwarded to native input */}
    </div>
  );
});

// Parent can now focus the input
function Form() {
  const inputRef = useRef(null);

  return (
    <>
      <Input ref={inputRef} label="Email" type="email" />
      <button onClick={() => inputRef.current.focus()}>Focus Email</button>
    </>
  );
}

// 2. useImperativeHandle — expose a controlled API
const VideoPlayer = forwardRef(function VideoPlayer({ src }, ref) {
  const videoRef = useRef(null);

  // Only expose play, pause, seek — not the entire HTMLVideoElement
  useImperativeHandle(ref, () => ({
    play: () => videoRef.current?.play(),
    pause: () => videoRef.current?.pause(),
    seek: (time) => {
      if (videoRef.current) videoRef.current.currentTime = time;
    },
    getDuration: () => videoRef.current?.duration ?? 0,
  }), []); // stable — no deps

  return <video ref={videoRef} src={src} />;
});

// Parent only gets play/pause/seek — DOM node is encapsulated
function VideoPage() {
  const playerRef = useRef(null);

  return (
    <>
      <VideoPlayer ref={playerRef} src="/movie.mp4" />
      <button onClick={() => playerRef.current.play()}>▶ Play</button>
      <button onClick={() => playerRef.current.pause()}>⏸ Pause</button>
      <button onClick={() => playerRef.current.seek(30)}>Skip 30s</button>
    </>
  );
}

import { lazy, Suspense, startTransition } from 'react';

// 1. Route-based code splitting
const Dashboard = lazy(() => import('./Dashboard'));
const Reports    = lazy(() => import('./Reports'));
const Settings   = lazy(() => import('./Settings'));

function App() {
  return (
    <Suspense fallback={<PageSpinner />}>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/reports"   element={<Reports />} />
        <Route path="/settings"  element={<Settings />} />
      </Routes>
    </Suspense>
  );
}

// 2. Component-level splitting (heavy widgets)
const HeavyChart = lazy(() => import('./HeavyChart'));

function DataPage({ showChart }) {
  return (
    <div>
      <DataTable />
      {showChart && (
        <Suspense fallback={<div className="chart-skeleton" />}>
          <HeavyChart />
        </Suspense>
      )}
    </div>
  );
}

// 3. Named exports with lazy (lazy requires default export)
const LazyModal = lazy(() =>
  import('./components').then(module => ({ default: module.Modal }))
);

// 4. Preloading — trigger load before user navigates
function NavLink({ to, children }) {
  const handleMouseEnter = () => {
    // Start loading on hover, before click
    import('./Dashboard');
  };
  return <Link to={to} onMouseEnter={handleMouseEnter}>{children}</Link>;
}

// 5. Suspense with data (React 18 + library support)
function UserProfile({ userId }) {
  return (
    <Suspense fallback={<Skeleton />}>
      <UserDetails userId={userId} />  {/* throws a Promise while loading */}
    </Suspense>
  );
}

// 1. Automatic batching (React 18)
function App() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  // React 17: two renders in setTimeout
  // React 18: ONE render (automatic batching) ✓
  setTimeout(() => {
    setCount(c => c + 1);
    setFlag(f => !f);
  }, 1000);
}

// 2. useTransition — mark update as non-urgent
function Search() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const [isPending, startTransition] = useTransition();

  const handleInput = (e) => {
    const val = e.target.value;
    setQuery(val);  // urgent — input updates immediately

    startTransition(() => {
      // non-urgent — React can pause this to handle user input
      const filtered = hugeList.filter(item =>
        item.name.toLowerCase().includes(val.toLowerCase())
      );
      setResults(filtered);
    });
  };

  return (
    <div>
      <input value={query} onChange={handleInput} />
      {isPending ? (
        <Spinner />
      ) : (
        <ResultsList results={results} />
      )}
    </div>
  );
}

// 3. useDeferredValue — defer rendering of a value
function FilteredList({ items }) {
  const [filter, setFilter] = useState('');
  const deferredFilter = useDeferredValue(filter);

  const isStale = filter !== deferredFilter;

  // This expensive computation uses the deferred value
  const filtered = useMemo(() => {
    return items.filter(item => item.includes(deferredFilter));
  }, [items, deferredFilter]);

  return (
    <div style={{ opacity: isStale ? 0.7 : 1 }}>
      <input value={filter} onChange={e => setFilter(e.target.value)} />
      <List items={filtered} />
    </div>
  );
}

// 4. New root API (React 18)
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(<App />);

// ❌ Index as key — breaks with reordering/deletion
function BadList({ items }) {
  return items.map((item, index) => (
    // React uses position to match old/new items
    // Deleting item[0] shifts all subsequent items → wrong state/animation
    <TodoItem key={index} item={item} />
  ));
}

// ✅ Stable unique ID
function GoodList({ items }) {
  return items.map(item => (
    <TodoItem key={item.id} item={item} />
  ));
}

// ❌ Random key — new key every render = remount every render
<Item key={Math.random()} />  // destroys and recreates on every render

// ✅ Using key to FORCE remount (intentional reset)
// Changing the key destroys the old component and creates a new one
// Useful for resetting a component's state when a prop changes
function ProfilePage({ userId }) {
  return (
    // When userId changes, ProfileEditor completely remounts
    // All its internal state (form fields, etc.) resets
    <ProfileEditor key={userId} userId={userId} />
  );
}

// Reconciliation examples:
// CASE 1: Type change → full remount
<div>  →  <span>  // div unmounts, span mounts

// CASE 2: Same type → just update props
<div className="old">  →  <div className="new">  // only className changed

// CASE 3: Component type change → remount
<Button />  →  <IconButton />  // Button unmounts, IconButton mounts

// 1. Dynamic import — load library only when needed
async function handleExport() {
  // xlsx library (500KB) only loads when user clicks Export
  const { utils, writeFile } = await import('xlsx');
  const ws = utils.json_to_sheet(data);
  const wb = utils.book_new();
  utils.book_append_sheet(wb, ws, 'Data');
  writeFile(wb, 'export.xlsx');
}

// 2. Conditional heavy component loading
const RichEditor = lazy(() => import('./RichTextEditor')); // 200KB

function PostEditor({ useRich }) {
  if (!useRich) return <textarea />;  // simple case loads nothing
  return (
    <Suspense fallback={<div>Loading editor...</div>}>
      <RichEditor />
    </Suspense>
  );
}

// 3. Prefetch on interaction
function DashboardNav() {
  const prefetchDashboard = () => import('./Dashboard');  // start load
  return (
    <Link
      to="/dashboard"
      onMouseEnter={prefetchDashboard}  // preload on hover
      onFocus={prefetchDashboard}        // preload on focus (keyboard nav)
    >
      Dashboard
    </Link>
  );
}

// 4. Vite config — manual chunk splitting
// vite.config.js
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          'vendor-react': ['react', 'react-dom'],
          'vendor-utils': ['lodash', 'date-fns'],
          'vendor-charts': ['recharts'],
        }
      }
    }
  }
};

// 5. Check bundle size before/after
import { defineConfig } from 'vite';
import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig({
  plugins: [visualizer({ open: true })], // opens treemap on build
});

// SSG — generated at build time, cached on CDN
// Best for: blog posts, marketing pages, docs
export default async function BlogPost({ params }) {
  const post = await getPost(params.slug); // called at BUILD TIME
  return <article>{post.content}</article>;
}

export async function generateStaticParams() {
  const posts = await getAllPosts();
  return posts.map(post => ({ slug: post.slug }));
}

// SSR — generated per request
// Best for: personalised pages, real-time data
export default async function Dashboard() {
  const user = await getUser(); // called on EVERY REQUEST
  return <div>Hello {user.name}</div>;
}

// ISR — static but refreshes in background
// Best for: product pages, news (data changes but not per-second)
async function getProduct(id) {
  const res = await fetch(`/api/products/${id}`, {
    next: { revalidate: 60 } // regenerate after 60 seconds
  });
  return res.json();
}

// CSR — client fetches after load
// Best for: user-specific data behind auth, dashboards
'use client';
function ProfilePage() {
  const { data } = useSWR('/api/me', fetcher);
  return <div>{data?.name}</div>;
}

// ─── PAGES ROUTER ───────────────────────────────────────
// pages/blog/[slug].js
export default function BlogPost({ post }) {
  // Component always runs on CLIENT
  return <article>{post.title}</article>;
}

// Data fetching via exported function
export async function getStaticProps({ params }) {
  const post = await getPost(params.slug);
  return { props: { post }, revalidate: 60 };
}

export async function getStaticPaths() {
  const posts = await getAllPosts();
  return {
    paths: posts.map(p => ({ params: { slug: p.slug } })),
    fallback: 'blocking',
  };
}

// Layout in _app.js
function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}


// ─── APP ROUTER ──────────────────────────────────────────
// app/blog/[slug]/page.tsx

// Server Component by default — runs on server, no JS shipped
export default async function BlogPost({ params }) {
  const post = await getPost(params.slug); // direct DB/API call
  return <article>{post.title}</article>;
}

// Static params for SSG
export async function generateStaticParams() {
  const posts = await getAllPosts();
  return posts.map(p => ({ slug: p.slug }));
}

// Metadata
export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return { title: post.title, description: post.excerpt };
}

// Layout: app/layout.tsx — persistent across routes
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <Nav />
        {children}
        <Footer />
      </body>
    </html>
  );
}

app/
├── layout.tsx              → wraps everything (html, body)
├── page.tsx                → / (home page)
├── loading.tsx             → / loading state
├── error.tsx               → / error boundary
├── not-found.tsx           → 404 page
│
├── blog/
│   ├── layout.tsx          → /blog/* shared layout (sidebar, nav)
│   ├── page.tsx            → /blog
│   └── [slug]/
│       ├── page.tsx        → /blog/my-post
│       └── opengraph-image.tsx → OG image
│
├── (auth)/                 → Route group — no URL segment
│   ├── login/page.tsx      → /login
│   └── register/page.tsx   → /register
│
├── dashboard/
│   ├── layout.tsx          → /dashboard/* shared layout
│   ├── page.tsx            → /dashboard
│   ├── @analytics/         → Parallel route slot
│   │   └── page.tsx
│   └── settings/
│       └── page.tsx        → /dashboard/settings
│
└── api/
    └── users/
        └── route.ts        → /api/users (GET, POST handlers)

// ─── Dynamic route with params ───────────────────────────
// app/blog/[slug]/page.tsx
interface Props {
  params: { slug: string };
  searchParams: { [key: string]: string };
}

export default async function Post({ params, searchParams }: Props) {
  const { slug } = params;
  const { sort } = searchParams; // URL: /blog/hello?sort=date
  const post = await getPost(slug);
  if (!post) notFound(); // triggers not-found.tsx
  return <article>{post.content}</article>;
}

// Catch-all: app/docs/[...path]/page.tsx
// Matches /docs/a, /docs/a/b, /docs/a/b/c
// params.path = ['a', 'b', 'c']

// ─── next/image ──────────────────────────────────────────
import Image from 'next/image';

// Static image — size automatically known
import profilePic from './profile.jpg';
<Image src={profilePic} alt="Profile" placeholder="blur" />

// Dynamic image — must specify size
<Image
  src={user.avatarUrl}
  alt={user.name}
  width={64}
  height={64}
  className="rounded-full"
/>

// Hero image — priority loads eagerly (above the fold)
<Image
  src="/hero.jpg"
  alt="Hero"
  fill                     // fills parent container
  priority                 // disable lazy loading for LCP image
  sizes="(max-width: 768px) 100vw, 50vw"
  style={{ objectFit: 'cover' }}
/>

// ─── next/font (App Router) ───────────────────────────────
import { Inter, JetBrains_Mono } from 'next/font/google';
import localFont from 'next/font/local';

const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',  // expose as CSS variable
});

const mono = JetBrains_Mono({
  subsets: ['latin'],
  variable: '--font-mono',
});

// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html lang="en" className={`${inter.variable} ${mono.variable}`}>
      <body className={inter.className}>{children}</body>
    </html>
  );
}

// ─── next/script ─────────────────────────────────────────
import Script from 'next/script';

// afterInteractive (default) — loads after page hydration
<Script src="https://analytics.example.com/script.js" />

// lazyOnload — loads during browser idle time
<Script src="https://chat-widget.example.com" strategy="lazyOnload" />

// Worker — loads in Web Worker (off main thread)
<Script src="/third-party.js" strategy="worker" />

// beforeInteractive — loads before hydration (rare, blocking)
<Script src="/critical-polyfill.js" strategy="beforeInteractive" />

// ─── SERVER COMPONENT (default) ──────────────────────────
// app/dashboard/page.tsx — no 'use client', async allowed
import { db } from '@/lib/db';

export default async function DashboardPage() {
  // Direct DB query — runs on server, never exposed to client
  const user = await db.user.findUnique({ where: { id: getUserId() } });
  const stats = await db.analytics.aggregate({ _sum: { views: true } });

  // Pass serialisable data to Client Component
  return (
    <main>
      <h1>Welcome, {user.name}</h1>
      <Stats data={stats} />           {/* Server Component */}
      <InteractiveChart data={stats} /> {/* Client Component */}
    </main>
  );
}

// ─── CLIENT COMPONENT ────────────────────────────────────
'use client'; // This directive propagates to all imports
import { useState, useEffect } from 'react';

interface ChartProps {
  data: { views: number }; // must be serialisable (no Functions, Dates as-is)
}

export function InteractiveChart({ data }: ChartProps) {
  const [period, setPeriod] = useState('7d');

  return (
    <div>
      <select value={period} onChange={e => setPeriod(e.target.value)}>
        <option value="7d">Last 7 days</option>
        <option value="30d">Last 30 days</option>
      </select>
      {/* chart rendering */}
    </div>
  );
}

// ─── PASSING SERVER COMPONENT AS CHILDREN ────────────────
// ✅ This works — Server Component passed via children prop
function Layout({ children }) {  // Client Component
  return <div className="layout">{children}</div>;
}

// In a Server Component:
<Layout>
  <ServerSidebar />  {/* Server Component passed as prop */}
</Layout>

// ─── server-only package — prevents accidental client import ──
import 'server-only'; // throws if imported in client bundle
export async function getSecretData() {
  return process.env.SECRET_KEY; // safe
}

// 1. Basic server component data fetching
export default async function PostsPage() {
  const posts = await fetch('https://api.example.com/posts', {
    next: { revalidate: 3600 } // ISR: revalidate every hour
  }).then(r => r.json());

  return <PostList posts={posts} />;
}

// 2. Parallel fetching — don't await sequentially (waterfall)
export default async function Dashboard() {
  // ❌ Sequential — total wait = 200ms + 150ms = 350ms
  // const user = await getUser();
  // const posts = await getPosts();

  // ✅ Parallel — total wait = max(200ms, 150ms) = 200ms
  const [user, posts, analytics] = await Promise.all([
    getUser(),
    getPosts(),
    getAnalytics(),
  ]);

  return <DashboardUI user={user} posts={posts} analytics={analytics} />;
}

// 3. Streaming with Suspense — show page while slow parts load
import { Suspense } from 'react';

export default function Page() {
  return (
    <main>
      <h1>Dashboard</h1>  {/* renders immediately */}
      <Suspense fallback={<StatsSkeleton />}>
        <SlowStats />      {/* streams in when ready */}
      </Suspense>
      <Suspense fallback={<TableSkeleton />}>
        <DataTable />
      </Suspense>
    </main>
  );
}

async function SlowStats() {
  const stats = await getSlowAnalytics(); // takes 2s
  return <StatsDisplay stats={stats} />;
}

// 4. Cache deduplication with React cache()
import { cache } from 'react';

export const getUser = cache(async (id: string) => {
  console.log('DB query for user', id); // only logged once per request
  return db.user.findUnique({ where: { id } });
});

// Both components call getUser — only ONE DB query happens
async function Header() { const user = await getUser('123'); ... }
async function Sidebar() { const user = await getUser('123'); ... }

// 5. On-demand revalidation (after mutation)
import { revalidatePath, revalidateTag } from 'next/cache';

async function createPost(formData: FormData) {
  'use server';
  await db.post.create({ data: parseForm(formData) });
  revalidatePath('/blog');           // invalidate /blog page
  revalidateTag('posts');            // invalidate all 'posts' tagged fetches
}

// ─── Server Action in a separate file ────────────────────
'use server';
import { db } from '@/lib/db';
import { revalidatePath } from 'next/cache';
import { redirect } from 'next/navigation';
import { z } from 'zod';

const CreatePostSchema = z.object({
  title: z.string().min(1).max(100),
  content: z.string().min(10),
});

export async function createPost(formData: FormData) {
  // Runs on the server
  const raw = {
    title: formData.get('title'),
    content: formData.get('content'),
  };

  const validated = CreatePostSchema.safeParse(raw);
  if (!validated.success) {
    return { error: validated.error.flatten().fieldErrors };
  }

  const post = await db.post.create({ data: validated.data });
  revalidatePath('/blog');           // clear cached blog page
  redirect(`/blog/${post.slug}`);    // navigate to new post
}

// ─── Using in a Client Component form ────────────────────
'use client';
import { createPost } from './actions';
import { useFormState, useFormStatus } from 'react-dom';

function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending}>
      {pending ? 'Creating...' : 'Create Post'}
    </button>
  );
}

const initialState = { error: null };

export function CreatePostForm() {
  const [state, formAction] = useFormState(createPost, initialState);

  return (
    <form action={formAction}>
      <input name="title" required />
      {state.error?.title && <span>{state.error.title}</span>}

      <textarea name="content" required />
      {state.error?.content && <span>{state.error.content}</span>}

      <SubmitButton />
    </form>
  );
}

// ─── Server Action called programmatically ────────────────
'use client';
import { deletePost } from './actions';

function PostCard({ post }) {
  return (
    <div>
      <h2>{post.title}</h2>
      {/* Call directly — no form needed */}
      <button onClick={() => deletePost(post.id)}>Delete</button>
    </div>
  );
}

// app/layout.tsx — root layout (required)
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Header />
        {children}  {/* page renders here */}
        <Footer />
      </body>
    </html>
  );
}

// app/dashboard/layout.tsx — dashboard-specific layout
export default function DashboardLayout({ children }) {
  return (
    <div className="dashboard">
      <Sidebar />          {/* persists across /dashboard/* */}
      <main>{children}</main>
    </div>
  );
}

// app/dashboard/loading.tsx — automatic Suspense fallback
// Shows while app/dashboard/page.tsx is fetching data
export default function DashboardLoading() {
  return (
    <div className="dashboard-skeleton">
      <SkeletonCard />
      <SkeletonCard />
      <SkeletonTable />
    </div>
  );
}

// app/dashboard/error.tsx — error boundary for /dashboard/*
'use client';
export default function DashboardError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    console.error(error); // or Sentry.captureException(error)
  }, [error]);

  return (
    <div className="error-page">
      <h2>Something went wrong in Dashboard</h2>
      <p>{error.message}</p>
      <button onClick={reset}>Try again</button>
    </div>
  );
}

// app/not-found.tsx — shown when notFound() is called
export default function NotFound() {
  return (
    <div>
      <h2>404 — Page Not Found</h2>
      <Link href="/">Go Home</Link>
    </div>
  );
}

// In a page — trigger not-found
import { notFound } from 'next/navigation';
export default async function PostPage({ params }) {
  const post = await getPost(params.slug);
  if (!post) notFound();
  return <Post post={post} />;
}

// app/api/posts/route.ts

import { NextRequest, NextResponse } from 'next/server';
import { db } from '@/lib/db';

// GET /api/posts or GET /api/posts?limit=10
export async function GET(request: NextRequest) {
  const limit = request.nextUrl.searchParams.get('limit') ?? '10';

  const posts = await db.post.findMany({
    take: parseInt(limit),
    orderBy: { createdAt: 'desc' },
  });

  return NextResponse.json(posts);
}

// POST /api/posts
export async function POST(request: NextRequest) {
  const body = await request.json();

  // Validate auth
  const session = await getSession(request);
  if (!session) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
  }

  const post = await db.post.create({ data: { ...body, userId: session.userId } });
  return NextResponse.json(post, { status: 201 });
}

// app/api/posts/[id]/route.ts — dynamic segment
export async function GET(
  request: NextRequest,
  { params }: { params: { id: string } }
) {
  const post = await db.post.findUnique({ where: { id: params.id } });
  if (!post) return NextResponse.json({ error: 'Not found' }, { status: 404 });
  return NextResponse.json(post);
}

export async function DELETE(
  request: NextRequest,
  { params }: { params: { id: string } }
) {
  await db.post.delete({ where: { id: params.id } });
  return new NextResponse(null, { status: 204 });
}

// Setting headers, CORS
export async function GET(request: NextRequest) {
  const data = await fetchData();
  return NextResponse.json(data, {
    headers: {
      'Cache-Control': 'public, max-age=60',
      'Access-Control-Allow-Origin': '*',
    },
  });
}

// middleware.ts — in project root
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl;

  // 1. Authentication check
  const token = request.cookies.get('auth-token')?.value;
  const isProtectedRoute = pathname.startsWith('/dashboard');

  if (isProtectedRoute && !token) {
    const loginUrl = new URL('/login', request.url);
    loginUrl.searchParams.set('from', pathname); // remember where they were
    return NextResponse.redirect(loginUrl);
  }

  // 2. Redirect logged-in users away from auth pages
  const isAuthRoute = pathname.startsWith('/login') || pathname.startsWith('/register');
  if (isAuthRoute && token) {
    return NextResponse.redirect(new URL('/dashboard', request.url));
  }

  // 3. Rewrite (serve different content, URL unchanged)
  if (pathname.startsWith('/old-blog')) {
    return NextResponse.rewrite(new URL(pathname.replace('/old-blog', '/blog'), request.url));
  }

  // 4. Add custom headers
  const response = NextResponse.next();
  response.headers.set('X-Frame-Options', 'DENY');
  response.headers.set('X-Content-Type-Options', 'nosniff');
  return response;
}

// Config: which routes middleware runs on
export const config = {
  matcher: [
    // Match all except static files and api routes
    '/((?!_next/static|_next/image|favicon.ico|api).*)',
    // Or be explicit:
    '/dashboard/:path*',
    '/profile/:path*',
  ],
};

// auth.ts — core config
import NextAuth from 'next-auth';
import Google from 'next-auth/providers/google';
import Credentials from 'next-auth/providers/credentials';
import { db } from '@/lib/db';
import bcrypt from 'bcryptjs';

export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [
    Google({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }),
    Credentials({
      async authorize(credentials) {
        const user = await db.user.findUnique({
          where: { email: credentials.email as string }
        });
        if (!user) return null;
        const valid = await bcrypt.compare(credentials.password as string, user.password);
        return valid ? user : null;
      },
    }),
  ],
  callbacks: {
    async jwt({ token, user }) {
      if (user) token.role = user.role; // add role to JWT
      return token;
    },
    async session({ session, token }) {
      session.user.role = token.role; // expose in session
      return session;
    },
  },
  pages: {
    signIn: '/login',
    error: '/auth/error',
  },
});

// app/api/auth/[...nextauth]/route.ts
export const { GET, POST } = handlers;

// middleware.ts — protect routes
export { auth as middleware } from '@/auth';
export const config = { matcher: ['/dashboard/:path*'] };

// In a Server Component
import { auth } from '@/auth';

export default async function DashboardPage() {
  const session = await auth();
  if (!session) redirect('/login');

  return <div>Hello {session.user.name}</div>;
}

// Sign in / out buttons (Server Action)
import { signIn, signOut } from '@/auth';

export function SignInButton() {
  return (
    <form action={async () => { 'use server'; await signIn('google'); }}>
      <button type="submit">Sign in with Google</button>
    </form>
  );
}

// .env.local (gitignored — secrets here)
DATABASE_URL=postgresql://user:pass@localhost/mydb
NEXTAUTH_SECRET=supersecretkey
STRIPE_SECRET_KEY=sk_test_...
NEXT_PUBLIC_API_URL=https://api.example.com
NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=G-XXXXXXXXXX

// ─── Server-only (no NEXT_PUBLIC_ prefix) ────────────────
// app/api/payment/route.ts
import Stripe from 'stripe';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!); // server only ✓

// ─── Client-accessible (NEXT_PUBLIC_ prefix) ─────────────
'use client';
// Available in browser — treat as public
const apiUrl = process.env.NEXT_PUBLIC_API_URL;

// ─── Type safety with T3 env approach ────────────────────
// env.mjs — validate at startup
import { createEnv } from '@t3-oss/env-nextjs';
import { z } from 'zod';

export const env = createEnv({
  server: {
    DATABASE_URL: z.string().url(),
    NEXTAUTH_SECRET: z.string().min(32),
  },
  client: {
    NEXT_PUBLIC_API_URL: z.string().url(),
  },
  runtimeEnv: {
    DATABASE_URL: process.env.DATABASE_URL,
    NEXTAUTH_SECRET: process.env.NEXTAUTH_SECRET,
    NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL,
  },
});

// Usage — typed, validated at startup
import { env } from '@/env.mjs';
const db = new Client(env.DATABASE_URL); // TypeScript knows this exists

// app/blog/[slug]/page.tsx
import type { Metadata, ResolvingMetadata } from 'next';

interface Props {
  params: { slug: string };
  searchParams: { [key: string]: string | string[] | undefined };
}

// Typed page component
export default async function BlogPost({ params, searchParams }: Props) {
  const { slug } = params;
  const post = await getPost(slug);
  return <article>{post.content}</article>;
}

// Typed metadata generation
export async function generateMetadata(
  { params }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  const post = await getPost(params.slug);
  const previousImages = (await parent).openGraph?.images || [];

  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      images: [post.coverImage, ...previousImages],
    },
  };
}

// app/api/users/[id]/route.ts — typed route handler
import { NextRequest, NextResponse } from 'next/server';

type RouteContext = {
  params: { id: string };
};

export async function GET(req: NextRequest, { params }: RouteContext) {
  const user = await getUser(params.id);
  return NextResponse.json(user);
}

// Typing Server Actions
'use server';
type FormState = { success: boolean; error?: string };

export async function createUser(
  prevState: FormState,
  formData: FormData
): Promise<FormState> {
  try {
    const email = formData.get('email') as string;
    await db.user.create({ data: { email } });
    return { success: true };
  } catch (e) {
    return { success: false, error: 'Failed to create user' };
  }
}

// next.config.ts — typed config
import type { NextConfig } from 'next';

const config: NextConfig = {
  images: { domains: ['images.unsplash.com'] },
  experimental: { serverActions: { allowedOrigins: ['localhost:3000'] } },
};

export default config;

// 1. Bundle analysis — find large dependencies
// package.json
"scripts": {
  "analyze": "ANALYZE=true next build"
}
// next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});
module.exports = withBundleAnalyzer({});

// 2. Optimised image with proper sizing
<Image
  src="/hero.jpg"
  alt="Hero image"
  width={1200}
  height={600}
  priority           // preload — critical for LCP
  quality={85}       // 85 = good quality + smaller file
  sizes="(max-width: 768px) 100vw, 1200px"
/>

// 3. Preload critical data at the root
// app/layout.tsx
export default async function RootLayout({ children }) {
  const user = await getCurrentUser(); // fetch once at layout level
  return (
    <html>
      <body>
        <UserProvider user={user}>
          {children}
        </UserProvider>
      </body>
    </html>
  );
}

// 4. Streaming for perceived performance
export default function Page() {
  return (
    <>
      <ImportantAboveFold />  {/* renders immediately */}
      <Suspense fallback={<Skeleton />}>
        <SlowSection />        {/* streams in */}
      </Suspense>
    </>
  );
}

// 5. Route-level performance config
export const dynamic = 'force-static';    // SSG
export const revalidate = 3600;           // ISR every hour
export const runtime = 'edge';            // Edge Runtime (faster cold start)

// 6. Partial Prerendering (Next.js 14+)
// Static shell with dynamic holes (best of SSG + SSR)
import { unstable_noStore as noStore } from 'next/cache';

async function DynamicSection() {
  noStore(); // this component is always dynamic
  const data = await fetchPersonalizedData();
  return <div>{data}</div>;
}

// Static wrapper — shell is prerendered, dynamic section streams
export default function Page() {
  return (
    <main>
      <StaticHero />
      <Suspense fallback={<Skeleton />}>
        <DynamicSection />
      </Suspense>
    </main>
  );
}

// jest.config.ts
import type { Config } from 'jest';
import nextJest from 'next/jest.js';

const createJestConfig = nextJest({ dir: './' });

const config: Config = {
  setupFilesAfterFramework: ['<rootDir>/jest.setup.ts'],
  testEnvironment: 'jsdom',
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/$1',
  },
};

export default createJestConfig(config);

// jest.setup.ts
import '@testing-library/jest-dom';

// ─── Testing a Client Component ──────────────────────────
import { render, screen, fireEvent } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Counter } from './Counter';

describe('Counter', () => {
  it('increments on click', async () => {
    const user = userEvent.setup();
    render(<Counter initialCount={0} />);

    expect(screen.getByText('Count: 0')).toBeInTheDocument();
    await user.click(screen.getByRole('button', { name: /increment/i }));
    expect(screen.getByText('Count: 1')).toBeInTheDocument();
  });
});

// ─── Testing a Server Action ──────────────────────────────
import { createPost } from './actions';
import { db } from '@/lib/db';

jest.mock('@/lib/db');

describe('createPost action', () => {
  it('creates a post and returns it', async () => {
    const mockPost = { id: '1', title: 'Test', content: 'Hello' };
    (db.post.create as jest.Mock).mockResolvedValue(mockPost);

    const formData = new FormData();
    formData.set('title', 'Test');
    formData.set('content', 'Hello');

    const result = await createPost({}, formData);
    expect(result.success).toBe(true);
    expect(db.post.create).toHaveBeenCalledWith({ data: expect.objectContaining({ title: 'Test' }) });
  });
});

// ─── Playwright E2E test ──────────────────────────────────
import { test, expect } from '@playwright/test';

test('user can create a post', async ({ page }) => {
  await page.goto('/login');
  await page.fill('[name=email]', 'test@example.com');
  await page.fill('[name=password]', 'password123');
  await page.click('button[type=submit]');

  await page.goto('/posts/new');
  await page.fill('[name=title]', 'My Test Post');
  await page.fill('[name=content]', 'Hello world content');
  await page.click('button[type=submit]');

  await expect(page).toHaveURL(/\/posts\//);
  await expect(page.getByText('My Test Post')).toBeVisible();
});