[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}
    />
  }
/>