01 / Foundation
Understand the concept
React re-renders a component whenever its state or props change. Understanding the rendering process helps build efficient applications.
Not every render updates the DOM. React compares the new Virtual DOM with the previous one and updates only the necessary elements.
02 / Implementation
Component Re-render
render.tsx
import { useState } from "react";
export default function Counter() {
const [count, setCount] = useState(0);
console.log("Component Rendered");
return (
<button onClick={() => setCount(count + 1)}>
{count}
</button>
);
}04 / Interview