Q1. What is React.memo?
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.
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:
Optionally, you can provide a custom comparison function as a second argument:
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.
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
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?
They serve different purposes: component-level vs value-level optimization.
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.