What are wasteful re-renders in React and how to prevent them using memoization?

Wasteful re-renders in the React library occur when components update their user interface without a real necessity, for example, due to a state change in a parent component or passing new references to functions and objects on every render. Although the virtual DOM itself works very fast, the reconciliation process and subsequent update of the real DOM can create noticeable micro-stutters and lags in the interface, especially when working with complex component trees and large lists.

To solve this problem, developers use memoization mechanisms, which allow saving calculation results or ready component instances between renders. The main tools for this in React are the useMemo and useCallback hooks, as well as the higher-order function React.memo. They compare incoming props and prevent the re-execution of heavy logic or the re-rendering of child elements if the input data remains the same.

It is important to note that memoization is not a universal remedy and itself requires memory and CPU time costs for comparing dependencies. Therefore, these optimizations should be applied consciously, having previously checked the application's performance using the built-in profiling tools of React Developer Tools.