REACT.MEMO DEMYSTIFIED: WHEN IT HELPS AND WHEN IT HURTS

Summary from the TLDR Web Dev newsletter

React's memoization tools like `React.memo`, `useMemo`, and `useCallback` cache values or components and prevent unnecessary re-renders based on dependency changes. A common misconception is addressed that memoizing props alone doesn't prevent child component re-renders, but rather when the prop is used in a hook or the child is wrapped with `React.memo`. There are also a few common pitfalls to watch out for, like prop spreading, the children prop, and nested memo components that can silently break memoization.