Q1. What is React.memo?
React.memo is a higher-order component that memoizes a functional component. It prevents re-rendering if the props haven't changed (shallow comparison). It's used for performance optimization in components that render often with the same props.
Q2. How do you use React.memo?
Wrap the component export: export default React.memo(MyComponent). Optionally, you can provide a custom comparison function as a second argument: React.memo(MyComponent, (prevProps, nextProps) => ...).
Q3. When should you use React.memo?
Use it for pure functional components that render frequently with the same props. Avoid using it on components where props change often, as the comparison adds overhead.
Q4. Does React.memo work with props that are functions?
Yes, but functions are compared by reference. If you pass inline functions, they will be new on each render, causing memo to fail. Use useCallback to stabilize function references.
Q5. What is the difference between React.memo and useMemo?
React.memo is a HOC that memoizes the entire component output based on props. useMemo memoizes a value. They serve different purposes: component-level vs value-level optimization.