Skip to main content

Component Hierarchy ↔ tree-like relationship of Component to structure data flow

aka Component-Tree

Component Composition

Composition Vs Inheritance​

reactjs.org/docs/composition vs inheritance.html

Component Relationship​

A direct parent-child relationship of Component with unidirectional data-flow

Adjacent/Sibling Components (on same level) do not have any Component Relationship

References​

  1. Prop Drilling ↔ to pass props through deep Component Hierarchy 🍜👨‍💻

  2. React DevTools ↔ Browser Extension to inspect React App (dev build only!) to view Component Hierarchy, props & state

  3. Suspense Boundary ↔ Component Hierarchy wrap by <Suspense\> to suspend render children with fallback until ready

  4. Subscribe ↔ to access Context from closest Parent Provider in Component Hierarchy

  5. Portal ↔ ReactDOM API Escape Hatch to render children outside Component Hierarchy of Parent Component

  6. Unidirectional binding ↔ React restricts data flow to one-way down Component Hierarchy. optional Escape Hatches exist