React useCallback and React.memo Explained for Performance Optimization

React components re-render whenever state, props, or parent components change, which can cause unnecessary rendering even when a child component's data remains the same. React.memo is a higher-order component that prevents a child from re-rendering unless its props actually change, using shallow comparison to detect differences. A common pitfall occurs when objects or functions are recreated on every render, causing React.memo to see new references and re-render anyway. The useCallback hook addresses this by memoizing function references, returning the same function instance across renders as long as its dependencies stay unchanged. Combining React.memo with useCallback and useMemo ensures stable references are passed as props, making these tools especially valuable in large, data-heavy, or performance-critical React applications.