react-patterns

React Development Patterns

Expert guide for building modern React 19 applications with new concurrent features, Server Components, Actions, and advanced patterns.

When to Use

• Building React 19 components with TypeScript/JavaScript
• Managing component state with useState and useReducer
• Handling side effects with useEffect
• Optimizing performance with useMemo and useCallback
• Creating custom hooks for reusable logic
• Implementing component composition patterns
• Working with refs using useRef
• Using React 19's new features (use(), useOptimistic, useFormStatus)
• Implementing Server Components and Actions
• Working with Suspense and concurrent rendering
• Building forms with new form hooks

Core Hooks Patterns

useState - State Management

Basic state declaration and updates:

import { useState } from 'react';

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


  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

State with initializer function (expensive computation):

const [state, setState] = useState(() => {
  const initialState = computeExpensiveValue();
  return initialState;
});

Multiple state variables:

function UserProfile() {
  const [name, setName] = useState('');
  const [age, setAge] = useState(0);
  const [email, setEmail] = useState('');


  return (
    <form>
      <input value={name} onChange={e => setName(e.target.value)} />
      <input type="number" value={age} onChange={e => setAge(Number(e.target.value))} />
      <input type="email" value={email} onChange={e => setEmail(e.target.value)} />
    </form>
  );
}

useEffect - Side Effects

Basic effect with cleanup:

import { useEffect } from 'react';

function ChatRoom({ roomId }: { roomId: string }) {
  useEffect(() => {
    const connection = createConnection(roomId);
    connection.connect();


    // Cleanup function
    return () => {
      connection.disconnect();
    };
  }, [roomId]); // Dependency array


  return <div>Connected to {roomId}</div>;
}