Как обернуть компонент React с небольшим штрафом за производительность?

Моя команда использует библиотеку React MaterialUI. Чтобы обеспечить согласованный шаблон пользовательского интерфейса и упростить настройку компонента MaterialUI, мы переносим каждый компонент MaterialUI в наш собственный компонент. Например:

const style = {} // our project custom style for ListItemText
const OurListItemText = ({primary, secondary, classes}: Props) => (
  <MuiListItemText
    primary={primary}
    secondary={secondary}
    className={classes.text}
  />
) // we only expose primary and secondary props of the original MuiListItemText.
// Team members are blocked from customising other MUIListItemText props

export default withStyles(styles)(OurListItemText)

MuiListItemText - это оригинальный компонент MaterialUI, а OurListItemText - наш компонент оболочки. В нашем проекте разрешено использовать только OurListItemText.

В качестве фрагмента выше, OurListItemText ничего не делает, кроме как перенаправить реквизиты в MuiListItemText. Однако это сильно влияет на производительность:

ListItemText в верхней части находится в OurListItemText а ниже - MuiListItemText. Если мы используем MuiListItemText напрямую, это может быть на 50% быстрее (мы попытались), что заметно, когда у нас есть 100 ListItemText. Удаление withStyles HOC немного улучшается, но не значительно.

ListItemText - только один пример, у нас есть аналогичная проблема с производительностью для других упакованных компонентов. (2 Typography на графике выше - это еще одна пара нашего компонента-обертки и MUI-оригинал-компонента)

Как улучшить производительность этих простых компонентов реквизита-пересылки?

Ответы

{Component({ data: 1, children: 'Hello' })}

<Component data={1}>Hello</Component>