# Advanced React Component Composition - frontendmastery.com Synced: [[2023_11_30]] 6:03 AM Last Highlighted: [[2023_07_23]] Tags: [[Software]]  ## Highlights [[2023_07_23]] [View Highlight](https://read.readwise.io/read/01h613wwkzaqre823z9tnx6g4w) > In a top-down approach (which tends to be more common) not enough. Leading to large monolithic components that take in too many props and try to do too much, which quickly become unmanageable. [[2023_07_23]] [View Highlight](https://read.readwise.io/read/01h613x6ypdqkzggen7ck0kdqf) > As consumers of a component or package, we want to be able to **depend on things with a high chance of remaining stable** over time, allowing us to get our job done. [[2023_07_23]] [View Highlight](https://read.readwise.io/read/01h613xb8n8cj2bs15vk8zw7a6) > Inversely, as makers of a component or package, we want to **encapsulate things that are likely to change** to protect consumers from any volatility. [[2023_07_23]] [View Highlight](https://read.readwise.io/read/01h6140rrskfbp4camhtmh6430) > The way to handle this is for sub-components to “register” and “deregister” themselves when they mount and unmount, so the top-level parent can access them directly. [[2023_07_23]] [View Highlight](https://read.readwise.io/read/01h6141n45bq5qqwtsb6g7r575) > In this approach, we attach unique ids or `data-attribute` on the underlying HTML our components render. This allows us to get the next or previous elements by querying the DOM with the indexes stored within those HTML attributes. [[2023_07_23]] [View Highlight](https://read.readwise.io/read/01h6149ytbbqn95qvnyz64t5f5) > **Stable dependency principle**: Is about creating APIs and components with the end user always in mind. We want to depend on things unlikely to change and hide the messy parts. [[2023_07_23]] [View Highlight](https://read.readwise.io/read/01h614a1bsvf293k06wzha5skf) > **Single responsibility principle**: Is about encapsulating a single concern. Easier to test, maintain and importantly - compose. [[2023_07_23]] [View Highlight](https://read.readwise.io/read/01h614a2ngf3ze5et251k00heg) > **Inversion of control**: Is about giving up the idea we can foresee every future use case and empower consumers to plug in their own stuff. [[2023_07_23]] [View Highlight](https://read.readwise.io/read/01h614a9wgahf4qf1q0ze3rarf) > There’s a balance between too little and too much flexibility. In this guide, we were optimizing for a component that can be reused flexibly across teams and features.