Why use a variable as the first argument in ReactDOM.render() instead of a JSX expression?

Question

Why use a variable as the first argument in ReactDOM.render() instead of a JSX expression?

Answer

Readability! If we are trying to pass a multi-line JSX expression to ReactDOM.render() we may find our JSX code is difficult to read and understand, however, if our JSX expression is a single line, we may want to pass the expression (instead of a variable storing the expression) to ReactDOM.render().

8 Likes

as your application grows, you’ll want to render a LOT of components (navbar, main content, articles, comment section, button, just an example)

in this case (after importing these components) your render method would look like this:

ReactDOM.render(
<div>
<Navbar />
<MainPage />
<NewsFeed />
..... etc.
</div>,
document.getElementById(app));

instead, it is more readable this way: you ‘collect’ these components in an App.js, and just render the App.

App.js: (after importing everything what’s needed) (sorry, commenting doesn’t keep the indentation formatting)
export default const App = () => (
return (
<>
<Navbar />
<MainPage />
<NewsFeed />
</>
));

when rendering:
ReactDOM.render(<App />, document.getElementById(app));

Hope this could help!