A re-render happens when [React](/courses/reactjs) runs a component again to calculate what its UI should look like with the latest props, state, or context. Re-rendering is a normal part of [React](/courses/reactjs) and is not automatically a performance problem. ### Common Causes of Re-Renders A component may render again when: ```text Its state changes Its parent renders again A Context value it consumes changes An external store subscription produces a changed value ``` ### State Update Example ```jsx function Counter() { const [count, setCount] = useState(0); return ( ); } ``` When `count` changes: ```text setCount() ↓ Counter renders again ↓ React calculates new UI ↓ necessary DOM changes are committed ``` ### Parent Re-Renders Can Render Children ```jsx function Parent() { const [count, setCount] = useState(0); return ( <> ); } ``` When `Parent` renders again, React normally renders its children too. That does not mean React replaces all of their DOM nodes. Rendering components and updating the DOM are different steps. React first calculates the next UI and then commits the DOM changes that are actually necessary. ### Re-Rendering Is Usually Cheap For a component such as: ```jsx function Greeting({ name }) { return

Hello {name}

; } ``` running the component again is normally extremely inexpensive. Adding memoization everywhere would often make the code more complicated without producing a noticeable improvement. ### When Can Re-Renders Become Expensive? Performance may become noticeable when a component performs expensive work such as: ```text Rendering thousands of items Processing a very large array Running expensive calculations Rendering complex charts or editors Causing many expensive child components to render Triggering repeated Effect-driven state updates ``` ### Example of an Expensive Calculation ```jsx function ProductList({ products, query }) { const visibleProducts = expensiveFilter( products, query ); return ; } ``` Every time `ProductList` renders, `expensiveFilter()` runs again. If that calculation is genuinely slow, memoization may help. ### Avoid Trying to Stop Every Render This is an important performance principle: ```text Re-render ≠ performance bug ``` Optimization should focus on renders or calculations that are actually expensive. ### Measure Before Optimizing React Developer Tools includes a Profiler that can help identify components that render frequently or take significant time to render. A useful workflow is: ```text Notice slow interaction ↓ Measure/profile it ↓ Find expensive work ↓ Optimize that specific problem ``` ### Interview-Ready Answer React components re-render when their state changes, their parent renders, consumed Context changes, or another subscribed source updates. Re-rendering is normal and usually inexpensive. It becomes a performance concern when renders happen frequently and involve expensive calculations or large component trees. The goal is not to prevent every re-render but to identify and optimize expensive ones.