A [React](/courses/reactjs) render cycle is the process [React](/courses/reactjs) uses to calculate what the UI should look like and then apply the necessary changes to the page. A useful beginner-friendly mental model is: ```text Something triggers an update ↓ React renders components ↓ React calculates the next UI ↓ React compares it with the previous UI ↓ React commits necessary DOM changes ``` ### What Can Trigger a Render? Common triggers include: ```text State changes Parent component renders Context value changes External store subscription changes ``` For example: ```jsx function Counter() { const [count, setCount] = useState(0); return ( ); } ``` When the button is clicked: ```text setCount() ↓ React schedules an update ↓ Counter runs again ↓ new JSX is calculated ↓ React determines what changed ↓ DOM is updated if necessary ``` ### Rendering Phase During rendering, React calls components to calculate the next UI. For example: ```jsx function Greeting({ name }) { return

Hello {name}

; } ``` If `name` changes from: ```text Asif ``` to: ```text Sara ``` React runs `Greeting` again and receives a new description of the UI. ### Commit Phase After React finishes calculating the required changes, it commits those changes to the DOM. Conceptually: ```text Previous UI

Hello Asif

Next UI

Hello Sara

React determines: Only text changed DOM update: Asif → Sara ``` React does not need to replace the entire page. ### Re-Render Does Not Mean DOM Replacement This is an important interview distinction. ```text Component re-rendered ``` does not mean: ```text All of its DOM was recreated ``` React may run the component again and discover that the resulting DOM does not need to change at all. For example: ```jsx function Message({ text }) { return

{text}

; } ``` If the component renders again with the same `text`, React can keep the existing DOM output. ### Rendering Should Be Pure A component should generally calculate UI from its inputs without performing side effects during rendering. Think of a component as: ```text props + state + context ↓ component ↓ JSX ``` The same inputs should describe the same UI. ### Interview-Ready Answer A React render cycle begins when an update is triggered by state, props through parent rendering, context, or another subscribed source. React enters the render phase to calculate the next UI, reconciles it with the previous result, and then enters the commit phase to apply necessary DOM changes. A component re-render does not automatically mean its DOM nodes are recreated.