A comprehensive guide to React component communication patterns, organized by the distance between components and the type of data being shared. Covers props and callbacks for close components, composition to avoid prop drilling, colocation for performance, imperative calls via useImperativeHandle, Context API with its re-render pitfalls, global stores (Zustand, Redux Toolkit, Jotai) with selector caveats, TanStack Query for server state, URL state via nuqs, and event-driven pub/sub for fire-and-forget signals. Each pattern is explained with code examples and guidance on when to use or avoid it.
Table of contents
Props and callbacks 🔗Colocation 🔗Imperative calls 🔗Context 🔗A global store 🔗Server state 🔗URL State 🔗Event-driven communication 🔗How to actually choose 🔗Reading list 🔗References 🔗39K Impressions1 Comment