React Mastery Series – Day 8: Understanding React Rendering & Component Lifecycle

Welcome back to the React Mastery Series ! In the previous article, we learned about State in React and how state changes make our applications interactive. Today, we will understand one of the most important concepts for every React developer: How does React render components? Many developers know how to write React code, but understanding when and why React renders is what separates a beginner from an advanced React developer. A strong understanding of rendering helps you: Build faster applications Avoid unnecessary re-renders Debug performance issues Use optimization techniques correctly Let's dive in. What is Rendering in React? Rendering is the process where React: Takes your component code Creates a representation of the UI Updates the browser DOM when necessary A simple way to visualize it: Component Code | ↓ React creates Element Tree | ↓ Reconciliation Process | ↓ Browser DOM Update Rendering does not always mean updating the browser DOM . React may render a component, compare the result, and decide that no DOM changes are required. Initial Render When a React application starts, the first rendering process happens. Example: function App () { return ( < h1 > Hello React </ h1 > ); } The flow: index.html | ↓ main.tsx | ↓ <App /> | ↓ React creates UI | ↓ Browser displays content This is called the initial render . What Causes a Re-render? A component re-renders when: 1. State Changes Example: const [ count , setCount ] = useState ( 0 ); setCount ( 1 ); When state changes: State Update | ↓ Component Re-renders | ↓ UI Updates 2. Props Change Example: < User name = "Siva" /> If the parent changes: < User name = "John" /> The child component receives new props and re-renders. 3. Parent Component Re-renders When a parent component renders, React also re-renders its children by default. Example: function Parent () { return ( <> < Child /> </> ); } If Parent updates, Child also gets rendered again. Later, we will learn how React.memo can prevent unnecessary child re