How does React updates screen in an application?

React updates UI in three steps,

1. Triggering or initiating a render: The component is going to triggered for render in two ways.

2. Initial render: When the app starts, you can trigger the initial render by calling creatRoot with the target DOM node followed by invoking component's render method. For example, the following code snippet renders App component on root DOM node.

import { createRoot } from "react-dom/client";

const root = createRoot(document.getElementById("root"));
root.render(<App />);

2. Re-render when the state updated: When you update the component state using the state setter function, the componen't state automatically queues for a render.

3. Rendering components: After triggering a render, React will call your components to display them on the screen. React will call the root component for initial render and call the function component whose state update triggered the render. This is a recursive process for all nested components of the target component.

4. Commit changes to DOM: After calling components, React will modify the DOM for initial render using appendChild() DOM API and apply minimal necessary DOM updates for re-renders based on differences between rerenders.