In React, a "Re-render" isn't necessarily bad. But **Wasted Re-renders** (when a component renders but the DOM doesn't change) can turn a fast app into a laggy mess. As a frontend architect, you must know how to use the React DevTools Profiler to find these killers.
The Profiler shows you a bar for every component.
If a parent state changes, all children re-render by default. You can stop this using React.memo(). It performs a "Shallow Comparison" of the props. If the props are and identical, React skips the component entirely.
Q: "Why would you NOT want to wrap every component in React.memo?"
Architect Answer: "Because `React.memo` is not free. It involves storing a copy of the old props in memory and performing a comparison on every render. If your component is small and simple (like an icon or a basic button), the 'Shallow Comparison' can actually take MORE time than just letting React re-render. Memoization should be reserved for expensive components or components that re-render hundreds of times per second."