Understanding React.memo and the React Profiler by Improving an Old Project

Recently, I started exploring React performance optimization , and one of the first concepts I studied was React.memo . Instead of creating a new project just for practice, I decided to revisit one of my old projects called Atomic Blog and improve its codebase. Working on an existing project helped me understand performance optimization in a much more practical way. This time, I focused on understanding how React rendering works and how unnecessary re-renders can affect application performance. What is React.memo? React.memo is a performance optimization technique that prevents a component from re-rendering if its props have not changed. Normally, when a parent component re-renders, all of its child components re-render as well — even if their data did not change. React.memo helps avoid that. Instead of always re-rendering, React compares the previous props with the new props. If nothing changes, React skips the render. That means: Less rendering work Better performance Faster UI updat