The Most Important Thing to Understand About Component Composition ?

The problem

Say you are working on an e-commerce application and are tasked with creating a product page that renders a call to action button to buy awesome Nike shoes.

Right now, the app has a following component tree:

> product-page…


This content originally appeared on DEV Community and was authored by Tomasz Kula

The problem

Say you are working on an e-commerce application and are tasked with creating a product page that renders a call to action button to buy awesome Nike shoes.

Right now, the app has a following component tree:

> product-page
>> card
>>> card-content
>>>> cta-button
Enter fullscreen mode Exit fullscreen mode

You want to render "Buy Air Max" as a label of the call to action button.

The issue is the button component is deeply nested in the component tree, and the product model information is available in the top most component.

> product-page <-- Here we know the product name
>> card
>>> card-content
>>>> cta-button  <-- Here we want to render the product name
Enter fullscreen mode Exit fullscreen mode

The Struggle

You might jump in and create the @Input() in each component and pass it down to the button component.

<!-- product-page.component -->
<card [productName]="productName"></card>
Enter fullscreen mode Exit fullscreen mode 
<!-- card.component -->
<card-content [productName]="productName"></card-content>
Enter fullscreen mode Exit fullscreen mode 
<!-- card-content.component -->
<cta-button [productName]="productName"></cta-button>
Enter fullscreen mode Exit fullscreen mode 
<!-- cta-button.component -->
Buy {{ productName }}
Enter fullscreen mode Exit fullscreen mode

It works fine, but there are couple of issues:

  • We are adding @Inputs() to components which don't use them, only passing them down to the child components. 
> product-page 
>> card <-- I don't care about the product name
>>> card-content <-- I don't care about the product name
>>>> cta-button
Enter fullscreen mode Exit fullscreen mode
  • It makes adding additional @Inputs() painful. If button needs more data from the product page, you have to pass it through two other components. This process is sometimes referred to as prop drilling. 
> product-page <- We know the product price
>> card <-- I have to add @Input() for price
>>> card-content <-- I have to add @Input() for price
>>>> cta-button <-- I have to add @Input() for price
Enter fullscreen mode Exit fullscreen mode
  • It makes unit testing more difficult as you have to test passing the @Inputs() in each component.

The Solution

You can solve this problem using a different approach. How about we use content projection instead of drilling props with @Inputs()?

Compare the previous solution, with the following:

<!-- product-page.component -->
<card> 
  <card-content>
    <cta-button>Buy {{ productName }}</cta-button>
  </card-content>
</card>
Enter fullscreen mode Exit fullscreen mode 
<!-- card.component -->
<ng-content></ng-content>
Enter fullscreen mode Exit fullscreen mode 
<!-- card-content.component -->
<ng-content></ng-content>
Enter fullscreen mode Exit fullscreen mode 
<!-- cta-button.component -->
<ng-content></ng-content>
Enter fullscreen mode Exit fullscreen mode

This approach has the following benefits:

  • We no longer add @Inputs() to components that don't need them so we avoid prop drilling.
  • Components become more extensible. You can pass as much information to the button component as you'd like, without touching the card components.
  • Because of the previous points, unit testing becomes much easier.

The Benefits

Let's see how we might benefit from this approach.

Say you are now tasked with extending the call to action button with a price tag - "Buy Air Max at $199".

With content projection approach, we only need to make a small change in the product page component:

<!-- product-page.component -->
<card> 
  <card-content>
    <cta-button>Buy {{ productName }} at {{ productPrice }}</cta-button>
  </card-content>
</card>
Enter fullscreen mode Exit fullscreen mode

That's it! See how easy it is? No props drilling, no test changes for the child components, no problem :)

Hope you're having a great one, and I'll see you for more web dev posts in the future ?

In Case You Missed it


This content originally appeared on DEV Community and was authored by Tomasz Kula


Print Share Comment Cite Upload Translate Updates
APA

Tomasz Kula | Sciencx (2021-02-12T10:42:58+00:00) The Most Important Thing to Understand About Component Composition ?. Retrieved from https://www.scien.cx/2021/02/12/the-most-important-thing-to-understand-about-component-composition-%f0%9f%9a%80/

MLA
" » The Most Important Thing to Understand About Component Composition ?." Tomasz Kula | Sciencx - Friday February 12, 2021, https://www.scien.cx/2021/02/12/the-most-important-thing-to-understand-about-component-composition-%f0%9f%9a%80/
HARVARD
Tomasz Kula | Sciencx Friday February 12, 2021 » The Most Important Thing to Understand About Component Composition ?., viewed ,<https://www.scien.cx/2021/02/12/the-most-important-thing-to-understand-about-component-composition-%f0%9f%9a%80/>
VANCOUVER
Tomasz Kula | Sciencx - » The Most Important Thing to Understand About Component Composition ?. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/02/12/the-most-important-thing-to-understand-about-component-composition-%f0%9f%9a%80/
CHICAGO
" » The Most Important Thing to Understand About Component Composition ?." Tomasz Kula | Sciencx - Accessed . https://www.scien.cx/2021/02/12/the-most-important-thing-to-understand-about-component-composition-%f0%9f%9a%80/
IEEE
" » The Most Important Thing to Understand About Component Composition ?." Tomasz Kula | Sciencx [Online]. Available: https://www.scien.cx/2021/02/12/the-most-important-thing-to-understand-about-component-composition-%f0%9f%9a%80/. [Accessed: ]
rf:citation
» The Most Important Thing to Understand About Component Composition ? | Tomasz Kula | Sciencx | https://www.scien.cx/2021/02/12/the-most-important-thing-to-understand-about-component-composition-%f0%9f%9a%80/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts