React Nextjs Patterns

// Server Component (default) - data fetching, no interactivity// app/users/page.tsxexport default async function UsersPage() {  const users = await getUsers(); // Runs on server
  return (    <div>      <h1>Users</h1>      <UserList users={users} />    </div>  );}
// Client Component - interactivity required// components/user-search.tsx'use client';
import { useState } from 'react';
export function UserSearch({ onSearch }: { onSearch: (q: string) => void }) {  const [query, setQuery] = useState('');
  return (    <input      value={query}      onChange={(e) => setQuery(e.target.value)}      onKeyDown={(e) => e.key === 'Enter' && onSearch(query)}    />  );}

// app/dashboard/page.tsximport { Suspense } from 'react';
export default function DashboardPage() {  return (    <div>      <h1>Dashboard</h1>
      {/* Fast data loads first */}      <Suspense fallback={<StatsSkeleton />}>        <StatsSection />      </Suspense>
      {/* Slow data streams in */}      <Suspense fallback={<ChartSkeleton />}>        <AnalyticsChart />      </Suspense>    </div>  );}
// Async component that streamsasync function StatsSection() {  const stats = await getStats(); // Can be slow  return <Stats data={stats} />;}

// Parallel data fetchingasync function DashboardPage() {  // Fetch in parallel, not sequentially  const [users, orders, stats] = await Promise.all([    getUsers(),    getOrders(),    getStats(),  ]);
  return <Dashboard users={users} orders={orders} stats={stats} />;}
// With error boundaryimport { notFound } from 'next/navigation';
async function UserPage({ params }: { params: { id: string } }) {  const user = await getUser(params.id);
  if (!user) {    notFound(); // Renders not-found.tsx  }
  return <UserProfile user={user} />;}

// BAD: Large component with all statefunction BadUserList() {  const [filter, setFilter] = useState('');  const [users, setUsers] = useState<User[]>([]);  const [selectedId, setSelectedId] = useState<string | null>(null);
  // All users re-render on any state change  return (    <div>      <input value={filter} onChange={e => setFilter(e.target.value)} />      {users.map(user => (        <div          key={user.id}          onClick={() => setSelectedId(user.id)}          className={selectedId === user.id ? 'selected' : ''}        >          {user.name}        </div>      ))}    </div>  );}
// GOOD: Push state down to where it's neededfunction GoodUserList() {  const [users] = useState<User[]>([]);  return <FilterableUserList users={users} />;}
function FilterableUserList({ users }: { users: User[] }) {  const [filter, setFilter] = useState('');  const filtered = useMemo(    () => users.filter(u => u.name.includes(filter)),    [users, filter]  );
  return (    <div>      <input value={filter} onChange={e => setFilter(e.target.value)} />      <SelectableList users={filtered} />    </div>  );}
function SelectableList({ users }: { users: User[] }) {  const [selectedId, setSelectedId] = useState<string | null>(null);
  return users.map(user => (    <UserItem      key={user.id}      user={user}      selected={selectedId === user.id}      onSelect={() => setSelectedId(user.id)}    />  ));}

// Only memo when there's a measurable benefitconst UserItem = memo(function UserItem({  user,  selected,  onSelect}: {  user: User;  selected: boolean;  onSelect: () => void;}) {  return (    <div      onClick={onSelect}      className={selected ? 'selected' : ''}    >      {user.name}    </div>  );});
// useMemo for expensive computationsfunction ExpensiveList({ items }: { items: Item[] }) {  const processed = useMemo(() => {    return items      .filter(complexFilter)      .sort(complexSort)      .map(complexTransform);  }, [items]);
  return <List items={processed} />;}
// useCallback for stable references passed to childrenfunction Parent() {  const [items, setItems] = useState<Item[]>([]);
  const handleDelete = useCallback((id: string) => {    setItems(prev => prev.filter(item => item.id !== id));  }, []);
  return <ItemList items={items} onDelete={handleDelete} />;}

// typesinterface State {  user: User | null;  isLoading: boolean;  error: Error | null;}
type Action =  | { type: 'FETCH_START' }  | { type: 'FETCH_SUCCESS'; user: User }  | { type: 'FETCH_ERROR'; error: Error }  | { type: 'LOGOUT' };
// reducerfunction reducer(state: State, action: Action): State {  switch (action.type) {    case 'FETCH_START':      return { ...state, isLoading: true, error: null };    case 'FETCH_SUCCESS':      return { ...state, isLoading: false, user: action.user };    case 'FETCH_ERROR':      return { ...state, isLoading: false, error: action.error };    case 'LOGOUT':      return { ...state, user: null };  }}
// contextconst AuthContext = createContext<{  state: State;  dispatch: Dispatch<Action>;} | null>(null);
// providerfunction AuthProvider({ children }: { children: ReactNode }) {  const [state, dispatch] = useReducer(reducer, {    user: null,    isLoading: true,    error: null,  });
  return (    <AuthContext.Provider value={{ state, dispatch }}>      {children}    </AuthContext.Provider>  );}
// hookfunction useAuth() {  const context = useContext(AuthContext);  if (!context) {    throw new Error('useAuth must be used within AuthProvider');  }  return context;}

// Data fetching hookfunction useQuery<T>(  key: string,  fetcher: () => Promise<T>): { data: T | null; isLoading: boolean; error: Error | null; refetch: () => void } {  const [data, setData] = useState<T | null>(null);  const [isLoading, setIsLoading] = useState(true);  const [error, setError] = useState<Error | null>(null);
  const fetchData = useCallback(async () => {    setIsLoading(true);    setError(null);    try {      const result = await fetcher();      setData(result);    } catch (err) {      setError(err instanceof Error ? err : new Error('Unknown error'));    } finally {      setIsLoading(false);    }  }, [fetcher]);
  useEffect(() => {    fetchData();  }, [fetchData]);
  return { data, isLoading, error, refetch: fetchData };}
// Debounced value hookfunction useDebouncedValue<T>(value: T, delay: number): T {  const [debounced, setDebounced] = useState(value);
  useEffect(() => {    const timer = setTimeout(() => setDebounced(value), delay);    return () => clearTimeout(timer);  }, [value, delay]);
  return debounced;}
// Local storage hookfunction useLocalStorage<T>(  key: string,  initialValue: T): [T, (value: T | ((prev: T) => T)) => void] {  const [storedValue, setStoredValue] = useState<T>(() => {    if (typeof window === 'undefined') return initialValue;    try {      const item = localStorage.getItem(key);      return item ? JSON.parse(item) : initialValue;    } catch {      return initialValue;    }  });
  const setValue = useCallback((value: T | ((prev: T) => T)) => {    setStoredValue(prev => {      const newValue = value instanceof Function ? value(prev) : value;      localStorage.setItem(key, JSON.stringify(newValue));      return newValue;    });  }, [key]);
  return [storedValue, setValue];}

// Flexible API with compound componentsconst Tabs = ({ children, defaultValue }: { children: ReactNode; defaultValue: string }) => {  const [activeTab, setActiveTab] = useState(defaultValue);
  return (    <TabsContext.Provider value={{ activeTab, setActiveTab }}>      <div className="tabs">{children}</div>    </TabsContext.Provider>  );};
Tabs.List = function TabsList({ children }: { children: ReactNode }) {  return <div className="tabs-list">{children}</div>;};
Tabs.Tab = function Tab({ value, children }: { value: string; children: ReactNode }) {  const { activeTab, setActiveTab } = useTabsContext();  return (    <button      className={activeTab === value ? 'active' : ''}      onClick={() => setActiveTab(value)}    >      {children}    </button>  );};
Tabs.Panel = function TabsPanel({ value, children }: { value: string; children: ReactNode }) {  const { activeTab } = useTabsContext();  if (activeTab !== value) return null;  return <div className="tabs-panel">{children}</div>;};
// Usage<Tabs defaultValue="tab1">  <Tabs.List>    <Tabs.Tab value="tab1">Tab 1</Tabs.Tab>    <Tabs.Tab value="tab2">Tab 2</Tabs.Tab>  </Tabs.List>  <Tabs.Panel value="tab1">Content 1</Tabs.Panel>  <Tabs.Panel value="tab2">Content 2</Tabs.Panel></Tabs>

// Data provider with render propfunction DataProvider<T>({  fetcher,  children,}: {  fetcher: () => Promise<T>;  children: (data: T | null, isLoading: boolean) => ReactNode;}) {  const { data, isLoading } = useQuery('data', fetcher);  return <>{children(data, isLoading)}</>;}
// Usage<DataProvider fetcher={getUsers}>  {(users, isLoading) => (    isLoading ? <Spinner /> : <UserList users={users} />  )}</DataProvider>