Могут ли реактивные хуки использоваться внутри JSX?

Question

Недавно я обнаружил следующий код:

    import React, { useContext } from "react";
    import ReactDOM from "react-dom";
    import UserContext from 'UserContext';
    const useUserName = () => {
      const context = useContext(UserContext);
      return context.userName;
    }

    function App() {
      return (
        <div className="App">
          {useUserName()}
        </div>
      );
    }

    const rootElement = document.getElementById("root");
    ReactDOM.render(<App />, rootElement);

useUserName возвращает имя пользователя в виде строки. Инстинктивно кажется странным и неправильным, что обработчик hook useUserName используется внутри JSX, который находится внутри функции render. Это допустимое использование? Я не смог найти ссылку, которая запрещает такое использование.

Answer 1

Инстинктивно странным и неправильным кажется то, что обработчик hook useUserName используется внутри JSX, который находится внутри функции "render".

Весь компонент - всего лишь функция render().

Это допустимое использование?

В чем разница между этим и

function App() {
  const userName = useUserName();
  return (
    <div className="App">
      {userName}
    </div>
  );
}