React.memo: Skip Unnecessary Component Renders
React.memo tells a component to skip re-rendering if its props are the same as last time. Use it to prevent costly renders when a parent updates. The footgun is passing new objects or functions as props, which breaks the default shallow comparison.
React.memo is a higher-order component that prevents a component from re-rendering if its props are unchanged. It's a performance shield for pure components in frequently updated UIs. By default, it shallowly compares props using Object.is. The main footgun is passing new objects, arrays, or functions on each parent render; these new references will always fail the shallow check, making memo ineffective.
Read the original → react.dev
- #react
- #performance
- #components
- #memoization
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.