// Render props - share logic via render function
function Mouse({ render }) {
  const [position, setPosition] = React.useState({ x: 0, y: 0 });
  
  return (
    <div onMouseMove={(e) => setPosition({ x: e.clientX, y: e.clientY })}>
      {render(position)}
    </div>
  );
}

// Usage
<Mouse render={({ x, y }) => (
  <h1>Mouse: {x}, {y}</h1>
)} />

// Compound components - share state between related components
const Tab = ({ children }) => {
  const [activeTab, setActiveTab] = React.useState(0);
  
  return React.Children.map(children, (child) =>
    React.cloneElement(child, { activeTab, setActiveTab })
  );
};

Tab.Header = ({ children, activeTab, setActiveTab }) => {
  return <div>{children}</div>;
};

Tab.Body = ({ children, activeTab, setActiveTab }) => {
  return <div>{children}</div>;
};

// Presentational - dumb component (UI only)
const UserList = ({ users }) => (
  <ul>
    {users.map(user => <li key={user.id}>{user.name}</li>)}
  </ul>
);

// Container - smart component (logic)
function UserListContainer() {
  const [users, setUsers] = React.useState([]);
  
  React.useEffect(() => {
    fetch('/api/users')
      .then(res => res.json())
      .then(data => setUsers(data));
  }, []);
  
  return <UserList users={users} />;
}

// Provider pattern - share state/config across app
const ThemeProvider = ({ children, theme }) => (
  <ThemeContext.Provider value={theme}>
    {children}
  </ThemeContext.Provider>
);

// Usage
<ThemeProvider theme='dark'>
  <App />
</ThemeProvider>

// Custom Hook - reusable logic
function useForm(initialValues, onSubmit) {
  const [values, setValues] = React.useState(initialValues);
  
  const handleChange = (e) => {
    setValues({ ...values, [e.target.name]: e.target.value });
  };
  
  const handleSubmit = (e) => {
    e.preventDefault();
    onSubmit(values);
  };
  
  return { values, handleChange, handleSubmit };
}

// Usage
function LoginForm() {
  const form = useForm({ email: '', password: '' }, (values) => {
    console.log('Login:', values);
  });
  
  return <form onSubmit={form.handleSubmit}>...</form>;
}

// Hooks + Redux
function Counter() {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();
  
  return (
    <button onClick={() => dispatch(increment())}>
      {count}
    </button>
  );
}