Can I have multiple calls to ReactDOM.render() in a single JavaScript file?

Question

Can I have multiple calls to ReactDOM.render() in a single JavaScript file?

Answer

We can have multiple calls to ReactDOM.render() in a single JavaScript file without issue - having multiple calls to ReactDOM.render() may be especially useful when using React in an exisiting application/site. However, when we build an application using only React, we’ll usually use a single call to ReactDOM.render(), not multiple.

17 Likes

May i know why a single call ? Render all the thing at once to save the computer processing power ?

When the web was created, they consist of pages, that was it. Whoever created the page put content on the page(s), that was a website.

when you had to navigate to a different page, a whole new page page had to fetched, loaded and displayed.

slowly, this process became more dynamic. Databases where introduced (allowing for user content on a website), but still the entire page had to be refreshed to then fetch all post and display them.

Take this forum for example, the “old way” meant that after submitting my reply, the whole page needed to be refreshed to display all replies

Too speed up this process, wouldn’t it be much nicer if my reply was submitted, validated and then just appended to the page without a page refresh?

reactJS (and others) takes thing even further, we named it SPA (single page application). Its so dynamic, you only update what you need, there are never any page refreshes.

So render only need to be called a single time, from that point on-wards you can do everything dynamic with react.

16 Likes

wow , thank for the reply and explanation on this

1 Like

No questions about what i explained? Its quite a lot do digest.

I guess I have a question, so the RenderDOM.render is always on the lookout for new appends to the page?
And what’s the difference btw react and the old ways that makes the page refresh redundant?

Not specifically the render method

the old way was, that if you clicked on a link (anchor element (<a>)), a new page was loaded (everything). Or that if you added a reply (like in this topic), the has to be reloaded in order to show your latest reply

reactJS makes this process more dynamic, the post is saved and then added to the page without triggering a refresh

So reactJS can dynamically add, remove or update elements on a page.

To make this happen, how does react work? like a service in the browser which automatically is compiled and run unlike other languages(e.g python) where code has to run manually every time to get the output.

If yes, at what point or line in the code is the execution started or entire react code is run?

Sorry if my questioning is bad.

its a good question, you need to understand the programming languages, libraries and tools you are using.

you could write a book about this.

a browser uses an engine, this engine renders a webpage, on a webpage we can include JS which is processed by the browser engine.

the browser doesn’t understand react, in order to run react (which is a javascript library) the code need to converted to JS (thankfully we have tools for this)

If you really want to understand this in depth, you need to start researching browsers and there engines, this could be a good starting point:

https://en.wikipedia.org/wiki/JavaScript_engine

1 Like

Thank you that helps : )

I used to use AJAX, with jQuery which seemed to do much the same as React - it sent or fetched data to or from a database and then that data was displayed immediately in the browser without a page refresh. How does React improve upon AJAX?

first things first, both Jquery and React are javascript libraries. So anything that can be done with these libraries can be done in Javascript

so what is the point of a library? It varies it bit between libraries, but in general it allows us to write programs faster due to existing functionality of the library we can use

So which one was first? Jquery or React? Answer: Jquery. So why was Jquery created and what was its purpose? Jquery was created in a time where JS (javascript) itself didn’t easily support different browsers. Jquery took care of us for this. Saved a lot of trouble.

What you mention about Ajax, we could also do in plain/vanilla JS.

So why react? React allows us to build SPA’s (single page application) much faster, making your whole website a lot more dynamic and faster.

Also, DOM manipulation is expensive (processing wise), react uses a shadow DOM to overcome some of this problems.

But react is overkill when you only have a couple of Ajax calls. Then Jquery or JS might be better. For each project you make, you need to decide what libraries you want to use.

1 Like