React in Practice: Production Patterns, Hook Discipline, and Common Pitfalls

// ❌ WRONG: Both calls read the same snapshot value in the current closure
const [count, setCount] = useState(0);

function handleDoubleIncrement() {
  setCount(count + 1);
  setCount(count + 1); // Increments by 1, NOT 2!
}

// ✅ CORRECT: React queues updater functions sequentially
function handleDoubleIncrement() {
  setCount(prev => prev + 1);
  setCount(prev => prev + 1); // Reliably increments to 2
}

// ❌ ANTI-PATTERN: Redundant state and extra re-render cycle
function UserDetails({ user }) {
  const [fullName, setFullName] = useState('');

  useEffect(() => {
    setFullName(`${user.firstName} ${user.lastName}`);
  }, [user]);

  return <div>{fullName}</div>;
}

// ✅ CLEAN: Derived state executes in a single pass with zero useEffect overhead
function UserDetails({ user }) {
  const fullName = `${user.firstName} ${user.lastName}`;
  return <div>{fullName}</div>;
}

// ✅ PRODUCTION PATTERN: Explicit cancelation on unmount or re-trigger
import { useState, useEffect } from 'react';

export function SearchResults({ query }: { query: string }) {
  const [data, setData] = useState<Item[]>([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (!query.trim()) {
      setData([]);
      return;
    }

    const controller = new AbortController();
    setLoading(true);

    async function fetchResults() {
      try {
        const response = await fetch(`/api/search?q=${encodeURIComponent(query)}`, {
          signal: controller.signal,
        });
        if (!response.ok) throw new Error('Search request failed');
        const results = await response.json();
        setData(results);
      } catch (err: unknown) {
        if (err instanceof Error && err.name === 'AbortError') {
          // Normal cancellation; do not treat as an error
          return;
        }
        console.error('Fetch error:', err);
      } finally {
        if (!controller.signal.aborted) {
          setLoading(false);
        }
      }
    }

    fetchResults();

    return () => {
      // Cancels in-flight network request immediately if query changes or component unmounts
      controller.abort();
    };
  }, [query]);

  if (loading) return <Spinner />;
  return <ItemList items={data} />;
}

'use client';

import { useActionState, useOptimistic } from 'react';
import { updateUsernameAction } from '@/actions/user';

export function ProfileForm({ currentUsername }: { currentUsername: string }) {
  // Action state handles pending states, server responses, and errors natively
  const [state, formAction, isPending] = useActionState(updateUsernameAction, {
    error: null,
    success: false,
  });

  // Optimistic UI updates the screen instantly before server confirms
  const [optimisticName, setOptimisticName] = useOptimistic(
    currentUsername,
    (current, newName: string) => newName
  );

  async function handleSubmit(formData: FormData) {
    const newName = formData.get('username') as string;
    setOptimisticName(newName);
    formAction(formData);
  }

  return (
    <form action={handleSubmit} className="space-y-4">
      <p className="text-sm font-semibold">Active User: {optimisticName}</p>
      
      <input
        type="text"
        name="username"
        defaultValue={currentUsername}
        className="rounded border p-2 text-sm"
        disabled={isPending}
      />

      <button
        type="submit"
        disabled={isPending}
        className="rounded bg-blue-600 px-4 py-2 text-white disabled:opacity-50"
      >
        {isPending ? 'Saving...' : 'Update Name'}
      </button>

      {state.error && <p className="text-xs text-red-500">{state.error}</p>}
    </form>
  );
}

import { create } from 'zustand';

interface StoreState {
  unreadMessages: number;
  sidebarOpen: boolean;
  toggleSidebar: () => void;
}

export const useAppStore = create<StoreState>((set) => ({
  unreadMessages: 0,
  sidebarOpen: false,
  toggleSidebar: () => set((s) => ({ sidebarOpen: !s.sidebarOpen })),
}));

// Component only re-renders when sidebarOpen changes; completely ignores unreadMessages!
export function SidebarToggle() {
  const sidebarOpen = useAppStore((s) => s.sidebarOpen);
  const toggleSidebar = useAppStore((s) => s.toggleSidebar);

  return (
    <button onClick={toggleSidebar}>
      {sidebarOpen ? 'Close Menu' : 'Open Menu'}
    </button>
  );
}