[Advanced React] Components as props - Add flexibility

[reboottime]

Component as Props

This article is part of an advanced React series tutorials.

Trade off: Having flexibility but too flexible

Major Content

• React.cloneElement and its alternatives
• Element as props

[reboottime]

The Problem And Solution

• Button example: In an ship fast env with frequent change requirements, a button component may look like this

• Modal example

[reboottime]

View From Performance Perspective

• The footer is not a performance matter as it just sits in memory

• React.cloneElement is a performance matter, way too fragile and magical on one or two params

Solution: https://react.dev/reference/react/cloneElement#alternatives

<List
 items={products}
 renderItem={(product, isHighlighted) =>
   <Row
     key={product.id}
     title={product.title}
     isHighlighted={isHighlighted}
   />
 }
/>