Component composition comparison is the disciplined practice of weighing how individual UI parts are assembled so you can pick the approach that yields the cleanest state flow, the smallest bundle, and the fastest onboarding for the next developer who opens the repo.
Ignoring this step leads to prop-drilling spaghetti, duplicated logic, and a component tree so tangled that even hot-reload gives up.
Why Composition Patterns Matter More Than Framework Choice
React, Vue, Svelte, and Solid all render lists, fetch data, and animate buttons. The differentiator is how you nest and wire their units. A well-composed React app outperforms a badly-composed Solid app despite Solid’s raw speed.
Composition is the only layer you fully control regardless of the core library’s release cycle.
Coupling Budget: The Hidden Metric
Every time two components know each other’s prop names, you spend coupling budget. Run out and every refactor becomes a 47-file touch fest.
Measure it by counting cross-imports that are not shared utilities; if the number grows faster than features, your composition model is leaking.
Props vs. Slots vs. Children: The API Surface Smackdown
React’s children prop feels universal until you need to pass two unrelated nodes into the same component; suddenly you’re forced into render props or brittle array indexing.
Vue’s named slots solve that by giving each insertion point a label, but they introduce a second template language that breaks TypeScript inference.
Svelte’s slot props let the parent read data exposed by the child, flipping control flow without a callback, a trick React only matches with
Real-World Trade-Off in a Calendar Grid
A calendar body needs to inject day numbers, event dots, and a tooltip on hover. With React children you end up cloning elements and adding props in a loop, triggering unnecessary re-renders.
Vue’s scoped slots expose day metadata declaratively, so the parent can stay in template land and the child keeps reactivity.
Measure the outcome: React version took 14 ms to update on hover, Vue 6 ms, bundle diff 0.3 kB gzipped.
Compound Pattern: The Lego Box That Scales
Compound components export multiple named pieces that share implicit state through a private context. Think
The pattern hides wiring complexity while preserving flexibility; adding a new
Implementation Checklist for React
Create a parent Tabs that holds the activeIndex in context. Export List, Tab, Panel as static properties so they can read and update that context.
Enforce usage rules with development-only runtime checks: warn if Panel is rendered outside Tabs, throw if Tab has no value prop.
Pitfall: Tree-Shaking Unfriendly Exports
Static compound properties defeat ES-module tree shaking because bundlers see them as side effects. Solve by re-exporting each piece from its own file and re-assembling in index.js; bundle size dropped 11 % in a real CRM dashboard.
Render Props Revival: When Callbacks Beat JSX
Render props look archaic next to hooks, yet they remain the cleanest way to isolate impure logic like drag gestures or intersection observation.
A
Performance Edge Case
Inline render props recreate the function every render, breaking React.memo. Memoize the render function itself with useCallback or lift it to module scope; the latter cut wasted renders from 240 to 0 in a 60-fps drawing canvas.
Hooks-First Composition: The State Colocation Era
Hooks moved state from class instances to function scope, letting you compose behavior instead of hierarchy. A useDebounce hook can be dropped into any input without touching the component tree.
This flattens the mental model: behavior is imported, not inherited.
Custom Hook Library Design
Export one hook per file with a single responsibility. Prefix with use, but also suffix with the domain—useCurrencyInput, useGeoLocation—to avoid name collisions when teams merge codebases.
Document return shape with TypeScript tuple notation: [value, setValue, error] so destructuring stays consistent across repos.
Context Avalanche: How Deep is Too Deep
Context skips prop drilling but creates a hidden subscription graph. Ten nested providers trigger a top-down React scan on every dispatch, even if only a leaf cares.
Measure update cost with React DevTools Profiler; if a provider’s commit phase exceeds 1.5 ms at 60 fps, split the context or move state to a external store.
Selective Subscription Pattern
Publish a Zustand or Jotai atom for each micro-domain instead of a single mega-store. A chat thread list subscribes only to threadAtoms, not the entire app state; rerender count dropped from 800 to 12 when a new message arrived.
Web Components: The Interoperability Wildcard
Custom elements run in React, Vue, Svelte, and even vanilla WordPress. Compose them when you need to ship a design system that outlives framework churn.
Shadow DOM encapsulates styles but blocks global theme variables; use CSS custom properties pierced via ::part() to keep branding consistent.
Slots vs. Named Slots in WC
Standard slots accept any node, but named slots let you project multiple regions. A
Micro-Frontends: Composition at Runtime
Module federation streams components across independently deployed builds. A checkout button can ship from Team A’s container while the cart lives in Team B’s, both sharing a single React instance at runtime.
The composition contract becomes a Webpack manifest, not an npm version.
Version Alignment Strategy
Pin peer dependencies to a narrow semver range and automate integration tests in a shared staging shell. When React 19 releases, upgrade in the shell first, then let teams opt-in via feature flags; rollback window shrank from 3 days to 20 minutes.
Server-First Composition: Streaming Islands
Astro, Qwik, and Fresh send HTML chunks that hydrate only on interaction. Compose pages from .astro files that import React, Vue, and Svelte components side-by-side without peer-dependency hell.
The boundary is the network, not the bundler.
Client Cost Audit
Audit hydration cost by running lighthouse-total-byte-weight on each island. A hero banner React component added 42 kB gzipped but only 3 % of visitors clicked it; replacing with a vanilla island saved 1.2 s TTI on 3G.
Bundle Splitting vs. Code Collocation
Colocating GraphQL fragments with UI components feels tidy, but every shared fragment pulls the entire component into the vendor chunk. Conversely, aggressive splitting creates 400-entry Webpack maps that slow down prefetch parsing.
Balance by splitting at route boundaries and keeping shared UI in a single library chunk; PageSpeed scores improved by 8 points on a 400-route e-commerce site.
Testing Matrix: Unit, Integration, Composition
Unit tests verify hook return values. Integration tests render a compound component with @testing-library. Composition tests spin up Storybook stories that embed components inside each other to catch context clashes.
Each layer catches a different class of bug; skipping composition tests hides prop-type mismatches that only surface in real nesting.
Visual Composition Testing
Use Chromatic or Percy to snapshot compound states. A single Tabs story with six panel combinations caught a missing border-radius regression that unit tests missed; fix took 3 min instead of a production hot patch.
Design-Handoff Symbiosis
Figma variants map cleanly to compound components. Name frames Tabs / Default, Tabs / Hover, Tabs / Disabled and export as SVG assets; developers drop them into Storybook args without re-typing labels.
Token Studio plugin can generate a JSON token file that feeds directly into a Tailwind plugin, keeping spacing values synchronized.
Refactor Budget: Selling Rewrites to Stakeholders
Translate composition improvements into business language. “Reduced bundle by 18 %” becomes “3 s faster checkout on 3G, +7 % mobile conversion.”
Track the metric for two sprints; if uplift exceeds the sprint cost, you earn a refactor budget for the next composition cleanup.