react

Critical Patterns

Custom Hooks (REQUIRED)

// ✅ ALWAYS: Extract reusable logic into custom hooks
function useUser(userId: string) {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    fetchUser(userId).then(setUser).finally(() => setLoading(false));
  }, [userId]);
  
  return { user, loading };
}

// ❌ NEVER: Duplicate logic across components

Component Composition (REQUIRED)

// ✅ ALWAYS: Prefer composition over prop drilling
function Dashboard({ children }: { children: React.ReactNode }) {
  return <div className="dashboard">{children}</div>;
}

// Usage
<Dashboard>
  <Sidebar />
  <MainContent />
</Dashboard>

Memoization (WHEN NEEDED)

// ✅ Use useMemo for expensive calculations
const sortedItems = useMemo(() => 
  items.sort((a, b) => a.name.localeCompare(b.name)),
  [items]
);

// ✅ Use useCallback for stable function references
const handleClick = useCallback((id: string) => {
  setSelected(id);
}, []);

---

Decision Tree

Need shared state?         → Use Context or Zustand
Need server state?         → Use React Query / SWR
Need form handling?        → Use React Hook Form
Need expensive calc?       → Use useMemo
Need stable callback?      → Use useCallback
Need DOM access?           → Use useRef

---

Code Examples

Controlled Form

function LoginForm() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    login({ email, password });
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="email" 
        value={email} 
        onChange={(e) => setEmail(e.target.value)} 
      />
      <input 
        type="password" 
        value={password} 
        onChange={(e) => setPassword(e.target.value)} 
      />
      <button type="submit">Login</button>
    </form>
  );
}

Error Boundary

class ErrorBoundary extends React.Component<Props, State> {
  state = { hasError: false };
  
  static getDerivedStateFromError() {
    return { hasError: true };
  }
  
  render() {
    if (this.state.hasError) {
      return <FallbackUI />;
    }
    return this.props.children;
  }
}

---

Commands

npx create-react-app myapp --template typescript
npm run dev
npm run build
npm run test