Middle+
How to make a component with 5 props ignore changes in three of them and re-render only when two change?
sobes.tech AI
Answer from AI
To make a component with 5 props re-render only when two of them change, you can use a custom comparison of props. For example, in React, this is done using React.memo and a comparison function:
const MyComponent = React.memo(function MyComponent(props) {
// component uses props.a and props.b
}, (prevProps, nextProps) => {
// ignore changes in props.c, props.d, props.e
return prevProps.a === nextProps.a && prevProps.b === nextProps.b;
});
Thus, the component will re-render only if a or b change. This improves performance by avoiding unnecessary renders when non-essential props change.