Client-side rendering in ReactJS involves Javascript running in the user’s browser to render elements on the web page. Here is a detailed sequence of steps:
1. Initially, the server sends a barebones HTML file to the client. This HTML file contains the link to the react.js library, root element, and script tags linking to the bundled javascript file for the ReactJS application.
1. After the user’s browser loads the HTML file, it starts fetching the linked resources.
1. Once the bundled javascript file for the ReactJS application is fetched, the browser starts executing it.
1. The execution of the JS file initializes the React components, sets their initial state, binds various event handlers, and finally renders those to the root element in the HTML.
1. Then React starts an event loop to listen for user interactions (like clicks, typing, touch events, etc). When the user interacts with elements on the screen, React handles the event and updates the UI by re-rendering the components (or parts thereof) as needed.
1. The updates and rendering are done within the virtual DOM, which is a JavaScript object that React uses to optimize UI updates.
1. If any component’s state gets updated in response to the events, React re-renders the component (or potentially a subtree of components underneath it). It does not, however, immediately update the actual DOM in the browser. Rather, it creates and updates a Virtual DOM.
1. React then runs a difference check between the updated virtual DOM and the actual DOM, known as “diffing”, to figure out what exactly changed.
1. After figuring out the changes, React efficiently applies those to the actual DOM. This process is called “reconciliation”.
This process ensures that the browser only spends time updating what has actually changed, rather than re-rendering everything, leading to a more efficient and faster UI.
