What are the patterns for sharing logic between components in React?

React has evolved through several patterns for sharing component logic, each with different tradeoffs. (1) Custom Hooks (modern, preferred): extract stateful logic into a reusable "use..." function. No component wrapping, no props collision, no render tree pollution. Best for: any sharable stateful logic. (2) Higher-Order Components (HOCs): function that wraps a component, adding behavior. Problems: wrapper hell in DevTools, prop name collisions, unclear origin of props. Legacy pattern — hooks usually replace it. (3) Render Props: component that accepts a function prop to render. More explicit than HOCs but creates callback nesting. (4) Context: shares state/logic down the tree without props. Good for global concerns (auth, theme) but re-render issues for dynamic data. (5) Compound Components: multiple components sharing state via context, composable API. Best for UI component libraries. (6) State Management Libraries (Redux, Zustand, Jotai): globally accessible logic and state. (7) Suspense + use() (React 19): share async data fetching logic declaratively. Decision: custom hooks first; context for shared state; compound components for UI kits; global state libraries when context is too broad.