Передача функциональных компонентов в качестве параметров рендеринга

Недавно я понял, что могу передавать функции через реквизиты рендеринга, которые можно рендерить с помощью jsx.

Пример:

<MessagesComponent
  renderMessages = {(eventName, Messages) => (
    <>
      <h1>{eventName}</h1> // eventName: string
      <Messages />  // Messages: Function/React Component (that can be rendered using jsx)
    </>
      )}>
  <h2>{'Loading...'}</h2>
</MessagesComponent>

Обычно я делал бы что-то вроде этого:

<MessagesComponent
  renderMessages = {(eventName, messages) => (
    <>
      <h1>{eventName}</h1>
      {messages.map(message => (
        <div key = {message.id}>{message.title}</div>
      ))}
    </>
  )}
/>

Приведенный выше пример позволяет MessagesComponent решать, как отображать сообщения.

Считается ли приведенный выше пример плохой практикой? Есть ли проблемы с таким подходом? Производительность или что-то в этом роде?