Pattern Evolution: HOCs, Render Props & Custom Hooks

1import React, { useState, useEffect } from 'react';
2
3// GENERATION 1: Higher-Order Component (HOC)
4// Problem: Wrapper hell in React DevTools, prop collisions, hidden prop contracts
5function withMouse(Component: React.ComponentType<{ mouse: { x: number; y: number } }>) {
6  return function WithMouseComponent(props: any) {
7    const [mouse, setMouse] = useState({ x: 0, y: 0 });
8    useEffect(() => {
9      const handleMove = (e: MouseEvent) => setMouse({ x: e.clientX, y: e.clientY });
10      window.addEventListener('mousemove', handleMove);
11      return () => window.removeEventListener('mousemove', handleMove);
12    }, []);
13    return <Component {...props} mouse={mouse} />;
14  };
15}
16
17// GENERATION 2: Render Props
18// Problem: "Pyramid of doom" callback indentation when composing 3+ concerns
19function MouseTracker({
20  children,
21}: {
22  children: (mouse: { x: number; y: number }) => React.ReactNode;
23}) {
24  const [mouse, setMouse] = useState({ x: 0, y: 0 });
25  useEffect(() => {
26    const handleMove = (e: MouseEvent) => setMouse({ x: e.clientX, y: e.clientY });
27    window.addEventListener('mousemove', handleMove);
28    return () => window.removeEventListener('mousemove', handleMove);
29  }, []);
30  return <>{children(mouse)}</>;
31}
32
33// GENERATION 3: Custom Hook (Modern Standard)
34// Solution: Flat, zero wrapper nodes, full TypeScript inference, pure composability!
35export function useMouse() {
36  const [mouse, setMouse] = useState({ x: 0, y: 0 });
37  useEffect(() => {
38    const handleMove = (e: MouseEvent) => setMouse({ x: e.clientX, y: e.clientY });
39    window.addEventListener('mousemove', handleMove);
40    return () => window.removeEventListener('mousemove', handleMove);
41  }, []);
42  return mouse;
43}
44
45// Modern Clean Usage
46export function Canvas() {
47  const { x, y } = useMouse();
48  return <div>Cursor at: {x}, {y}</div>;
49}