Feed Reader BotФотография
DEV Community: react 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:
1. Takes your component code
2. Creates a representation of the UI
3. 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 renders. 4. Context Value Changes When a component consumes Context: const user = useContext(UserContext); If the context value changes, the component re-renders. Understanding the Render Phase React rendering happens in two major phases: Phase 1: Render Phase React calculates what the UI should look like.
During this phase:
* Components execute
* JSX is created
* Virtual DOM is generated
Example: function Profile() { console.log("Rendering Profile"); return ( h1>
Profile h1> ); } Every time the component renders, this function executes again. Phase 2: Commit Phase React compares the new Virtual DOM with the previous one.
This process is called: Reconciliation React identifies:
* What changed?
* What stayed the same?
* What needs updating?
Then React updates the actual DOM. Virtual DOM and Reconciliation Example:
Before: * React
* Angular After state update: * React
* Angular
* Vue React compares both trees.
It identifies: New Item Added:
* Vue Only that part of the DOM is updated. Functional Components and Lifecycle Class components had lifecycle methods like: componentDidMount() componentDidUpdate() componentWillUnmount() Functional components use Hooks to handle lifecycle behavior.
The main Hook for lifecycle operations is: useEffect() Example: useEffect(() =[...]