React recursive rendering without conditions infinite page load

Question

I'm learning React. I know about recursion in plain JS functions. And recently I've found that this concept exists in React too. It's called recursive rendering. And you need some condition for it to work like in plain function recursion to stop. But I can't find an explanation of what happens when I write code like this:

function App() {
  return (
    <App>
      ...other JSX here
    </App>
  );
}

The page just loads infinitely until the browser says that page unresponsive. So what's happening with React component in this case?

Answer 1

A react component is basically a function that returns some content (JSX in this case). So the way a function may call its own instance, a react component may also return its own so to speak. To put it in another way, JSX is a sytactic sugar for React.createElement() fucntion and stopping a react component from returning its own JSX happens exactly the same way you stop a recursive function (React.createElement() in this case) by using condition for props of the component (JSX syntax) or parameters of the function (createElement() syntax).