Сравнение рендеринга компонента: вызов как функции и как JSX‑тэга

Условие

Проверьте, существует ли различие при использовании компонента через прямой вызов функции и через JSX‑синтаксис.

<div>
  {Widget()}
</div>
<div>
  <Widget />
</div>

Ответ

Разница есть: <Widget /> создаёт отдельный React-компонент, а Widget() — обычный вызов функции в рендере родителя. Компоненты следует использовать через JSX.

У отдельного компонента есть собственная идентичность в дереве React, граница состояния и жизненного цикла. При прямом вызове возвращается JSX без такой границы, а вызванные внутри хуки фактически привязываются к текущему рендерящемуся компоненту. Условное выполнение Widget() может нарушить порядок хуков.

Для простой функции без хуков картинка иногда совпадёт, но это не эквивалентная модель исполнения и обновлений. Если функция специально является render-helper, обычный вызов допустим; не смешивайте такой helper с самостоятельным компонентом.