I am learning react and am new to the concepts like single page applications.

So what I have understood from single page application tutorials is , only the required data is sent from the server and our asynchronous code updates only that part, ensuring the remaining part of the application is in sync with the user thus maintaining interactivity .

server sends the data-> browser receives it ->now, what will happen 1) Imagine server sent full html,css information.... then browser reloads the entire page which decreases interactivity.. 2) server just sent data that is requested by react framework (spa) , now after browser receives that data, how does it know to call react framework to hand over the functionality of updating dom to react. hope my question is clear.

CodePudding user response：

Please read https://stackoverflow.com/help/how-to-ask.

This is the internet and people can be unkind, especially on a platform explicitly meant for asking questions.

To answer your questions, though:

how does the browser knows whether it is an response that browser should re render the whole UI and how does it knows when it should send that response to ajax/asynchronous code to update only some part of UI.

1. React knows when it should change based on its internal state. Please read https://reactjs.org/docs/state-and-lifecycle.html for more information.
2. When using react, you can run things like fetch, await it, and do all that fun stuff. When the data comes in, React has a native state management you can use for any component. Setting this state, most of the time, will cause the component to re-render. Thus, the fetched data can be known (by the state) and put into the UI. All of this happens within the React framework, not native HTML.

how does it differentiate? can you please explain how does it differentiate and how does it know whether it should be fully reloaded or just update without reload, if update without reload-then what is the process that browser does?

3. Now this is the beauty of React. You do not need to know! React, internally, will check for what specific components rely on what states. Imagine I had 2 lists displayed on my page and they both have their own state, and I updated one list. React knows only one state changed, so it will only make the list that changed re-render.

React is powerful. Please read more documentation before coming to stackoverflow to ask, this should be the last resort!

https://reactjs.org/docs/getting-started.html

CodePudding user response：

The browser does not know about when to reload or update the DOM. React does.

React is in charge of reloading the elements of the DOM when needed, for example when its component is receiving new data. When we have a pure single page application (thus the name - page does not change), the whole page is not being reloaded, only some elements of the page are.

React does it by keeping its own virtual DOM, and updating the "real" DOM when needed, see here and here for more details. If the whole page is reloaded (while you expected it to be React application), the browser is usually explicitly instructed to do so by some piece of JS code, but most likely not as a part of standard React app workflow.